Next.js: Babel runtime generator on build

[samosaboy]

Bug report

Describe the bug

Upon building the application using next build and deploying it to Firebase hosting following the firebase ssr example, the application fails to load and throws

{ Error: Cannot find module '@babel/runtime/regenerator' at Function.Module._resolveFilename (module.js:476:15) at Function.Module._load (module.js:424:25) at Module.require (module.js:504:17) at require (internal/module.js:20:19) at Object.@babel/runtime/regenerator (webpack:/external "@babel/runtime/regenerator":1:0) at __webpack_require__ (webpack:/webpack/bootstrap ad406904bc90fab2952f:21:0) at Object../pages/_app.tsx (/user_code/next/server/bundles/pages/_app.js:170:85) at __webpack_require__ (webpack:/webpack/bootstrap ad406904bc90fab2952f:21:0) at Object.0 (/user_code/next/server/bundles/pages/_app.js:4490:18) at __webpack_require__ (webpack:/webpack/bootstrap ad406904bc90fab2952f:21:0) code: 'MODULE_NOT_FOUND', sourceMapsApplied: true }

This only occurs on building of the application for production deployment. Serving the application locally results in no errors.

Adding @babel/runtime to package.json does not change the results and the bug persists.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Create project
2. Add firebase: 5.4.2, firebase-functions: 2.0.5, @babel/runtime: 7.0.0 to the project.
3. Hook up firebase hosting to the project using the example
4. Run the firebase deploy --only hosting,functions script
5. Point your browser to your now hosted site
6. See a Error: could not handle the request error on the browser
7. Check firebase logs and see the above output (i.e. Error: Cannot find module '@babel/runtime/regenerator'

Expected behavior

We expect the website to load with no deployment issues related to SSR and Next.

System information

• OS: OS X High Sierra 10.13.6
• Version of Next.js: 6.1.1

This seems to be a persistent bug as pointed out in other issues here and here.

[timneutkens]

@jthegedus

[planadecu]

I've solved the bug by just removing async to the getInitialProps function.

Before

Post.getInitialProps = async function(){
 ...
 values = await otherFunction();
 ...
 return values2;
}

After

Post.getInitialProps = function(){
 ...
  valuesPromise = otherFunction();

  return new Promise(function(resolve, reject) {
    valuesPromise.then(values =>{
      ...
      resolve(values2);
    }).catch(reject)
  });
}

[NathanielHill]

Might be related to #5868

@planadecu you could also try importing regenerator-runtime/runtime.js

[xuemeigan]

@planadecu, I tried with the promise way, the getInitialProps never get called on server.js, only when I added the async in front of getInitialProps, the build got back with

server.js:14
var _ref = _asyncToGenerator( /#__PURE__/regeneratorRuntime.mark(function _callee(ctx) {
ReferenceError: regeneratorRuntime is not defined....}

[Timer]

Closing as this example has been recently updated and is working.