react-native: [0.57.0-rc.4] Running local-cli commands fails with "regeneratorRuntime is not defined" when using babel.config.js

Review the documentation: https://facebook.github.io/react-native
Search for existing issues: https://github.com/facebook/react-native/issues
Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.3
      CPU: x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
      Memory: 1.90 GB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.9.4 - ~/.nvm/versions/node/v8.9.4/bin/node
      Yarn: 1.5.1 - /usr/local/bin/yarn
      npm: 5.6.0 - ~/.nvm/versions/node/v8.9.4/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    IDEs:
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.4.1 => 16.4.1
      react-native: 0.57.0-rc.4 => 0.57.0-rc.4
    npmGlobalPackages:
      react-native-cli: 2.0.1

Description

Using react-native 0.57.0-rc.4, the following issue exists: Running the react-native local-cli (e.g. running the npm start command of a fresh react-native project) fails with

ReferenceError: regeneratorRuntime is not defined
    at getCliConfig (/Users/jwerner/projects/rn-test/Foo/node_modules/react-native/local-cli/core/index.js:128:44)

when babel is setup with babel.config.js:

// babel.config.js
module.exports = {
  "presets": ["module:metro-react-native-babel-preset"]
}

Everything works when the same babel configuration is applied in the old .babelrc format.

I traced down the problem by inserting console.logs in node_modules/@babel/register/lib/node.js, function compile. When using babel.config.js you can see that all plugins of module:metro-react-native-babel-preset are being applied to the node_modules/react-native/local-cli/core/index.js file; when using .babelrc that’s not the case. The code breaks because apparently regeneratorRuntime call is inserted, but babel/polyfill (or regenerator-runtime/runtime) import is not happening.

Is this behaviour known? How are users expected to make use of babel.config.js?

Reproducible Demo

Repository with working state With a broken state

Repro:

clone repo
checkout commit ee4497c2e2856ad6c52d632c73ad0e038d5b7d03
npm install / yarn install
npm start
see how the error above is reproduced

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 24
Comments: 18 (4 by maintainers)

Commits related to this issue

[metro-babel-register] Ignore babel.config.js files in addition to .babelrc This adds support for projects using `metro-babel-register` with Babel 7's babel.config.js files. The `metro-babel-register... — committed to ide/metro-bundler by ide 6 years ago
Ignore babel.config.js files in addition to .babelrc (#276) Summary: **Summary** This adds support for projects using `metro-babel-register` with Babel 7's babel.config.js files. The `metro-babel-re... — committed to Titozzz/metro by ide 6 years ago

Most upvoted comments

@fhadsheikh solution worked after I did the following:

 "dependencies": {
    "@babel/runtime": "7.0.0" <-- added this
    "react": "16.5.0",
    "react-native": "0.57.0",
 },

"devDependencies": {
      '@babel/plugin-transform-runtime', <-- add if you are using babel.config.js and not .babelrc
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-export-default-from": "^7.0.0",
    "babel-eslint": "^8.2.6",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "babel-preset-react-native": "5.0.0",
    "metro-react-native-babel-preset": "0.45.3",
    "react-devtools": "^3.3.2",
    "react-native-dotenv": "^0.2.0",
  },

It helped to create a new project with “react-native init” and fix the bug to see which dependencies were needed.

N.B. No need for @babel/plugin-transform-runtime if using .babelrc.

My babel config is:

presets: [
      'module:metro-react-native-babel-preset', 
      'module:react-native-dotenv',
    ],
    plugins: [
      '@babel/plugin-proposal-export-default-from',
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      '@babel/plugin-transform-runtime', <- - add this if using babel.config.js and not .babelrc
    ],

+64

helenaford on Sep 16, 2018

I had the same problem before. My solution is adding @babel/plugin-transform-runtime into babel plugin list.

+10

bob76828 on Sep 13, 2018

@Piterden Try @babel/plugin-transform-runtime in your plugins array

fhadsheikh on Sep 15, 2018

   "@babel/core": "7.0.0-beta.47",
    "@babel/plugin-proposal-decorators": "7.0.0-beta.47",
    "@babel/plugin-proposal-export-default-from": "7.0.0-beta.47",
    "@babel/plugin-transform-react-jsx-source": "7.0.0-beta.47",
    "@babel/plugin-transform-runtime": "7.0.0-beta.47",
    "@babel/runtime": "^7.0.0-beta.47", << as soon as I added this, plugin-transform-runtime worked.

Without downgrading the runtime I had the following error after adding “plugin-transform-runtime”: "Cannot find module '@babel/runtime/helpers/interopRequireDefault'."

I got the hint to downgrade the runtime from https://github.com/meteor/meteor/issues/10126

Also, because I downgraded the runtime I had to downgrade my other babel dependencies back to beta.47 too. My project uses react-native 56 and Metro 0.38.

I only added plugin-transform-runtime because of this bug. Hope it helps.

helenaford on Sep 15, 2018

How is this not included in the readme or in troubleshooting or something? I 've followed the get started guide to run a hello world app and I 've struggled for two days searching for this. I ended up using react-native init instead of expo init and then run react-native run-ios twice till I get the project running.

kormic on Nov 8, 2018

I had to also install the following plugins and dependancies that @helenaford 's comment shows:

‘@babel/plugin-proposal-export-default-from’, [‘@babel/plugin-proposal-decorators’, { legacy: true }],

slavik0329 on Nov 28, 2018

Thanks for the solution @helenaford ! saved my day!

ospfranco on Oct 23, 2018

This was an absolute nightmare to work out - Thanks for your hard work @helenaford - saved me a bunch of time 👍

Mentioum on Sep 20, 2018

For me it not work, I spent 15 hrs )))

Piterden on Sep 15, 2018

Hey, Piterden, no problem. I was just relieved there were people commenting on this issue and you were keeping the thread alive. But, yeah, I just noticed that so will move it before I commit. After this, I’ve opened the app and I’ve ran into another bug, and found this git issue.

“found that was caused by corejs option @babel/plugin-transform-runtime, I replaced it by @babel/polyfill”

https://github.com/facebook/react-native/issues/21048#issuecomment-420559560.

I’m thinking about resorting back to using .bablerc because it all worked except for being able to have separate environments.

helenaford on Sep 15, 2018

Hey, Helena, thank you for response. But shouldn’t "@babel/runtime" be in dependencies, not devDependencies?

Honestly I use Vue. But this bug is not depend on our frameworks. It is babel. I already wrote there an issue.

Piterden on Sep 15, 2018