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

[jonathanglasmeyer]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] 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

[bob76828]

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

[Mokto]

Awesome ! Thanks.

[Piterden]

Not work for me

{
  "presets": [
    [
      "@babel/env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            ">0.25%",
            "not ie 11",
            "not op_mini all"
          ]
        }
      }
    ]
  ],
  "plugins": [
    "@babel/proposal-class-properties",
    "@babel/proposal-export-namespace-from",
    "@babel/proposal-function-sent",
    "@babel/proposal-json-strings",
    "@babel/proposal-numeric-separator",
    "@babel/proposal-throw-expressions",
    "@babel/syntax-dynamic-import",
    "@babel/syntax-import-meta",
    "@babel/transform-runtime"
  ]
}

[fhadsheikh]

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

[Piterden]

{
  "presets": [
    [
      "@babel/env",
      {
        "modules": false,
        "useBuiltIns": "usage",
        "targets": {
          "browsers": ["last 2 Chrome versions"]
        },
        "debug":true
      }
    ]
  ],
  "plugins": [
    "@babel/transform-async-to-generator",
    "@babel/transform-runtime"
  ]
}

The same error

[Piterden]

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

Sorry, it is included.

[helenaford]

   "@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.

[Piterden]

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.

[helenaford]

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.

[Piterden]

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

[helenaford]

@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
    ],

[Piterden]

My solution is making those two methods sync, because new Mnemonic() inside async function anyway causes regenerator exception.

[Mentioum]

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

[ospfranco]

Thanks for the solution @helenaford ! saved my day!

[timxor]

This is a really bad developer experience and why I stray from da fe 🧶

[kormic]

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.

[slavik0329]

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

[leovazquezz1]

I was having this problem when I runned this command "yarn". I fixed it by running "npm install" after I deleted my node_modules folder. If it does not work with yarn try npm