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

jonathanglasmeyer · 2018-09-11T11:16:39Z

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

The text was updated successfully, but these errors were encountered:

bob76828 · 2018-09-13T01:29:13Z

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

Mokto · 2018-09-13T02:00:50Z

Awesome ! Thanks.

Piterden · 2018-09-14T17:00:41Z

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 · 2018-09-15T00:45:17Z

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

Piterden · 2018-09-15T00:49:56Z

{
  "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 · 2018-09-15T01:37:20Z

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

Sorry, it is included.

helenaford · 2018-09-15T02:11:05Z

   "@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 meteor/meteor#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 · 2018-09-15T02:27:19Z

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 · 2018-09-15T02:35:08Z

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"

#21048 (comment).

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

Piterden · 2018-09-15T02:39:42Z

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

helenaford · 2018-09-16T01:24:30Z

@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 · 2018-09-16T02:19:32Z

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

Mentioum · 2018-09-20T04:17:24Z

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

…abelrc This adds support for projects using `metro-babel-register` with Babel 7's babel.config.js files. The `metro-babel-register` package is designed to apply a static, hardcoded list of Babel plugins. It intentionally ignores .babelrc files by setting `babelrc: false`. Babel 7 added a new configuration file called babel.config.js, with similar but slightly different loading semantics. To disable babel.config.js lookup, there is a new option called `configFile` instead of `babelrc`. See https://babeljs.io/docs/en/next/config-files#project-wide-configuration. Fixes facebook/react-native#21052 Test plan: In a React Native project with babel.config.js and an error about `regeneratorRuntime` missing, said error goes away with this `metro-babel-register` patch.

ospfranco · 2018-10-23T14:24:21Z

Thanks for the solution @helenaford ! saved my day!

timxor · 2018-11-06T12:28:07Z

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

kormic · 2018-11-08T19:14:45Z

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 · 2018-11-28T23:26:43Z

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 · 2019-05-08T01:14:53Z

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

react-native-bot added the 💻CLI label Sep 11, 2018

gluons mentioned this issue Oct 1, 2018

Find a way to solve the exception in React Native tleunen/babel-plugin-module-resolver#292

Open

ide mentioned this issue Oct 1, 2018

[metro-babel-register] Ignore babel.config.js files in addition to .babelrc facebook/metro#276

Closed

facebook-github-bot closed this as completed in facebook/metro@7a62c79 Oct 2, 2018

fwal mentioned this issue Nov 14, 2018

expo build fails inside xdl with "Cannot read property 'forEach' of undefined" expo/expo-cli#179

Closed

facebook locked as resolved and limited conversation to collaborators Oct 2, 2019

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Oct 2, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jonathanglasmeyer commented Sep 11, 2018

bob76828 commented Sep 13, 2018

Mokto commented Sep 13, 2018

Piterden commented Sep 14, 2018

fhadsheikh commented Sep 15, 2018

Piterden commented Sep 15, 2018

Piterden commented Sep 15, 2018

helenaford commented Sep 15, 2018

Piterden commented Sep 15, 2018 •

edited

Loading

helenaford commented Sep 15, 2018

Piterden commented Sep 15, 2018

helenaford commented Sep 16, 2018 •

edited

Loading

Piterden commented Sep 16, 2018

Mentioum commented Sep 20, 2018

ospfranco commented Oct 23, 2018

timxor commented Nov 6, 2018

kormic commented Nov 8, 2018 •

edited

Loading

slavik0329 commented Nov 28, 2018

leovazquezz1 commented May 8, 2019

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

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

Comments

jonathanglasmeyer commented Sep 11, 2018

Environment

Description

Reproducible Demo

bob76828 commented Sep 13, 2018

Mokto commented Sep 13, 2018

Piterden commented Sep 14, 2018

fhadsheikh commented Sep 15, 2018

Piterden commented Sep 15, 2018

Piterden commented Sep 15, 2018

helenaford commented Sep 15, 2018

Piterden commented Sep 15, 2018 • edited Loading

helenaford commented Sep 15, 2018

Piterden commented Sep 15, 2018

helenaford commented Sep 16, 2018 • edited Loading

Piterden commented Sep 16, 2018

Mentioum commented Sep 20, 2018

ospfranco commented Oct 23, 2018

timxor commented Nov 6, 2018

kormic commented Nov 8, 2018 • edited Loading

slavik0329 commented Nov 28, 2018

leovazquezz1 commented May 8, 2019

Piterden commented Sep 15, 2018 •

edited

Loading

helenaford commented Sep 16, 2018 •

edited

Loading

kormic commented Nov 8, 2018 •

edited

Loading