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

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"
        }
      }
    ]
  ]
}

1. 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 (
      <Container>
        <Component {...pageProps} />
      </Container>
    );
  }
}

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.<anonymous> (/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.<anonymous> (/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

[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"
  ]
}

[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.