Next.js: Adding _app.js to 'with-firebase-hosting' causes "Cannot find module '@babel/runtime/regenerator'"

[delftware]

Describe the bug
I have cloned the with-firebase-hosting example, seen here: https://github.com/zeit/next.js/tree/canary/examples/with-firebase-hosting

The only change I have made are as follows:

1. Configured .firebaserc to my project
2. Change src/functions/.babelrc to the following (fixes another issue)
   ```{
   "presets": [
   [
   "@babel/preset-env",
   {
   "targets": {
   "node": "6.11.5"
   }
   }
   ]
   ]
   }

3. Have added an `_app.js` in `src/pages/_app.js` that looks as follows:

import App, { Container } from 'next/app';
import React from 'react';

class MyApp extends App {
static async getInitialProps({ Component, router, ctx }) {
let pageProps = {};

if (Component.getInitialProps) {
  pageProps = await Component.getInitialProps(ctx);
}

return { pageProps };

}

render() {
const { Component, pageProps } = this.props;
return (



);
}
}

export default MyApp;

When I run `yarn deploy`, although the deploy is successful, I receive the following error in my Firebase console

{ 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. (/user_code/next/dist/bundles/pages/_app.js:193:18)
at __webpack_require__ (/user_code/next/dist/bundles/pages/_app.js:23:31)
at Object. (/user_code/next/dist/bundles/pages/_app.js:94:85)
at __webpack_require__ (/user_code/next/dist/bundles/pages/_app.js:23:31)
at Object.module.exports.Object.defineProperty.value (/user_code/next/dist/bundles/pages/_app.js:85:18)
at __webpack_require__ (/user_code/next/dist/bundles/pages/_app.js:23:31) code: 'MODULE_NOT_FOUND' }
```

To Reproduce
Steps to reproduce the behavior, please provide code snippets or a repository:
yarn deploy after making my changes, and attempt to hit the deployed url

@jthegedus

[delftware]

I would also like to add that that yarn serve works with no issues

[jthegedus]

I will have a look at this at EOD :+1:

[delftware]

Thank you @jthegedus, I really appreciate your help.

[timneutkens]

This breaks code splitting:

  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "6.11.5"
        }
      }
    ]
  ]
}

Instead do:

 "presets": [
    [
      ["next/babel",
      {
        "preset-env": {
          "targets": {
            "node": "6.11.5"
          }
        }

      }]
    ]
  ]

[delftware]

@timneutkens when I use your snippet:

{
  "presets": [
    [
      ["next/babel",
      {
        "preset-env": {
          "targets": {
            "node": "6.11.5"
          }
        }
      }]
    ]
  ]
}

On yarn deploy, I get the following error:

Error: ReferenceError: [BABEL] /Users/Name/Desktop/BASE-with-firebase-hosting-app/src/functions/index.js: Unknown option: .0. Check out http://babeljs.io/docs/usage/options/ for more information about options.

I am a complete babel noob, but if you meant this:

{
  "presets": [
      ["next/babel",
      {
        "preset-env": {
          "targets": {
            "node": "6.11.5"
          }
        }
      }]
    ]
}

That deploys successfully, but the Cannot find module '@babel/runtime/regenerator' error remains after deploying

[delftware]

Hey guys, I think I figured it out.

// _app.js

static async getInitialProps({ Component, router, ctx }) {...

Because it's node version is 6.11.5, this async isn't supported yet.

Do you know how I could support async / await into this project?

[timneutkens]

async/await is transpiled by babel, should work fine.

[jthegedus]

This seems to be unrelated to the .babelrc file and more the Next.js 6 upgrade to @babel v7.

I created a minimal reproduction without the use of babel https://github.com/jthegedus/nextjs-with-firebase-hosting-issue-reproduction

The Cloud Function runtime fails when the compiled _app.js file requires @babel/runtime/regenerator. Despite this being included in the next.js package.json. However, by adding @babel/runtime explicitly to the package.json it does...

I'm not sure what the cause is here. Whether it be how Firebase/Cloud Functions installs and stores node_modules, or the pkg manager it installs the dependencies with or how it is exposed as a dependency of next.js.

I ran into a bunch of different errors when trying to compile Next.js 6 with the existing example. I believe the cause is conflicting/overriding @babel deps. Removing them from package.json and relying on the ones installed by Next.js seems to work (except in the runtime case of @babel/runtime).

I will update the with-firebase-hosting example accordingly.

[mdrideout]

I experienced this issue after adding async / await functions to my app. I updated all of my packages to the latest version (including babel), and the issue persisted. I tried including @babel/runtime in my package.json and the issue persisted. I tried updating cloud functions to node 8, and the issue persisted.

I changed from async / await, to a traditional return new Promise style function, and it successfully deployed.

[Ghostavio]

So, it's not possible to use async / await with firebase hosting?

[mdrideout]

@Ghostavio - I am currently using babel now and it's working (with node 8 on firebase functions functions / client side as well).

This is all my babel stuff - IDK how I got here but it works lol

Webpack

            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    plugins: [require('@babel/plugin-transform-async-to-generator')]
                }
            }

Package.json dev dependencies

    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-transform-async-to-generator": "^7.1.0",
    "@babel/plugin-transform-modules-commonjs": "^7.1.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/polyfill": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.0-beta.1",

Babel.rc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-modules-commonjs",
    "@babel/plugin-transform-runtime"
  ]
}