Serverless asset compatibility (e.g. Firebase)

package.json

@@ -77,6 +77,7 @@
  "eslint": "5.16.0",
  "eslint-plugin-typescript": "0.14.0",
  "express": "4.17.0",
+ "firebase": "6.2.1",
  "fs-extra": "7.0.1",
  "get-port": "5.0.0",
  "isomorphic-unfetch": "3.0.0",

packages/next/build/webpack-config.ts

@@ -175,6 +175,8 @@ export default async function getBaseWebpackConfig(
  },
  }
 
+ const isProductionServerless = !dev && isServer && target === 'serverless'
+
  const devtool = dev ? 'cheap-module-source-map' : false
 
  let webpackConfig: webpack.Configuration = {
@@ -341,7 +343,7 @@ export default async function getBaseWebpackConfig(
  (chunk.name === CLIENT_STATIC_FILES_RUNTIME_MAIN ||
  chunk.name === CLIENT_STATIC_FILES_RUNTIME_WEBPACK)
  ) {
- return chunk.name.replace(/\.js$/, '-[contenthash].js')
+ return chunk.name.replace(/\.js$/, '-[hash].js')
  }
  return '[name]'
  },
@@ -366,10 +368,30 @@ export default async function getBaseWebpackConfig(
  ...nodePathList, // Support for NODE_PATH environment variable
  ],
  },
+ ...(isProductionServerless
+ ? {
+ // `@zeit/webpack-asset-relocator-loader` will relocated all assets
+ // so we can't let webpack mock this to `/` & `/index.js`
+ node: { __dirname: false, __filename: false },
+ }
+ : undefined),
  // @ts-ignore this is filtered
  module: {
  strictExportPresence: true,
  rules: [
+ isProductionServerless && {
+ test: /\.(m?js|node)$/,
+ parser: { amd: false },
+ use: {
+ loader: '@zeit/webpack-asset-relocator-loader',
+ options: {
+ outputAssetBase: 'assets',
+ existingAssetNames: [],
+ wrapperCompatibility: false,
+ production: true,
+ },
+ },
+ },
  (selectivePageBuilding || config.experimental.terserLoader) &&
  !isServer && {
  test: /\.(js|mjs|jsx)$/,

packages/next/package.json

@@ -67,6 +67,7 @@
  "@babel/preset-typescript": "7.3.3",
  "@babel/runtime": "7.4.5",
  "@babel/runtime-corejs2": "7.4.5",
+ "@zeit/webpack-asset-relocator-loader": "0.6.2",
  "amphtml-validator": "1.0.23",
  "async-sema": "3.0.0",
  "autodll-webpack-plugin": "0.4.2",

test/integration/firebase/next.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+ target: 'serverless',
+ onDemandEntries: {
+ maxInactiveAge: 1000 * 60 * 60
+ },
+ experimental: {
+ autoExport: true
+ }
+}

test/integration/firebase/pages/about/history.js

@@ -0,0 +1,19 @@
+import firebase from 'firebase/app'
+import 'firebase/firestore'
+
+if (!firebase.apps.length) {
+ firebase.initializeApp({ projectId: 'noop' })
+}
+
+const store = firebase.firestore()
+
+const Comp = ({ results }) => {
+ return <div>Hello Firebase: {results}</div>
+}
+
+Comp.getInitialProps = async () => {
+ const query = await store.collection('users').get()
+ return { results: query.size }
+}
+
+export default Comp

test/integration/firebase/test/index.test.js

@@ -0,0 +1,28 @@
+/* eslint-env jest */
+/* global jasmine */
+import { join } from 'path'
+import {
+ killApp,
+ findPort,
+ nextBuild,
+ nextStart,
+ renderViaHTTP
+} from 'next-test-utils'
+const appDir = join(__dirname, '../')
+let appPort
+let app
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 5
+
+describe('Serverless', () => {
+ beforeAll(async () => {
+ await nextBuild(appDir, [])
+ appPort = await findPort()
+ app = await nextStart(appDir, appPort)
+ })
+ afterAll(() => killApp(app))
+
+ it('should render the page', async () => {
+ const html = await renderViaHTTP(appPort, '/about/history')
+ expect(html).toMatch(/Hello Firebase: <!-- -->0/)
+ })
+})

test/lib/next-test-utils.js

@@ -196,7 +196,9 @@ export function buildTS (args = [], cwd, env = {}) {
  instance.stderr.on('data', handleData)
 
  instance.on('exit', code => {
- if (code) { return reject(new Error('exited with code: ' + code + '\n' + output)) }
+ if (code) {
+ return reject(new Error('exited with code: ' + code + '\n' + output))
+ }
  resolve()
  })
  })