[0.56.0][iOS][Android] Can't find variable: require #21048

deecewan · 2018-09-11T03:37:22Z

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 info` output

React Native Environment Info:
    System:
      OS: macOS 10.14
      CPU: x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
      Memory: 3.28 GB / 32.00 GB
      Shell: 5.5.1 - /usr/local/bin/zsh
    Binaries:
      Node: 10.9.0 - ~/.nvm/versions/node/v10.9.0/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 6.2.0 - ~/.nvm/versions/node/v10.9.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
      Android SDK:
        Build Tools: 23.0.1, 23.0.3, 25.0.1, 25.0.3, 26.0.1, 26.0.2, 27.0.3, 28.0.2
        API Levels: 23, 24, 25, 26, 28
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 10.0/10L232m - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.4.2 => 16.4.2
      react-native: 0.56.0 => 0.56.0

Description

Application was upgraded to 0.56.0 from 0.55.4
Had a lot of issues with getting set up, mostly stemming from jest tests
Fixed them, now all babel is pointing to 7.0.0-beta.47 by using yarn resolutions

When building for development or release, I get a can't find variable: require error. This happens on both iOS and Android, and seems to be in code that I have no control over. Here is the output on iOS:

Android doesn't make it far enough to get a Redbox - it throws before it gets to that point, but I same the same error thrown using logcat. The error on Android is com.facebook.react.devsupport.JSException: Can't find variable: require.

I have seen #19827 (and its various children), but all of them seem to imply that only production is broken, not development. And none of the errors included have anything to do with require.

Based on comments in other threads: I am not using generators. I am using async/await.

I have tried removing node_modules, clearing the watchman cache, clearing the yarn cache, clearing the build folder in XCode, clearing the Android build artifacts.

At first I thought that this issue was due to Mojave, but the builds produced by my CI platform are also broken, and they are running in Xcode 9.4.1 and macOS Sierra/High Sierra, or Linux for Android builds.

Reproducible Demo

I have no idea how to reproduce this at this stage. Still investigating.

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

devthejo · 2018-09-11T22:18:14Z

I've the same error with react-native@^0.57.0-rc.4 and babel@^7.0.0

deecewan · 2018-09-11T22:51:50Z

From extensive digging, I think it has something to do with my babel configuration, which I spent a lot of time messing with to try and get the bundle to compile, and my tests (written with Jest) to also run (and compile the react-native-based dependencies).

Still working through finding a solution.

devthejo · 2018-09-11T23:21:12Z

good luck, me too, spent 10 hours on it from now,
in fact with other bugs previous this one with react-native and babel 7 config...

devthejo · 2018-09-12T08:29:12Z

found that was caused by corejs option @babel/plugin-transform-runtime, I replaced it by @babel/polyfill, here is my files:
.babelrc

{
  "presets": [
    "module:metro-react-native-babel-preset",
  ],
  "plugins": [
    "react-require",
    [
      "module-resolver",
      {
        "root": [
          "./src",
          "./assets"
        ],
        "alias": {
          "app": "./src",
          "assets": "./assets"
        }
      }
    ],
    [
      "babel-plugin-require-context-polyfill",
      {
        "alias": {
          "app": "./src"
        }
      }
    ],

    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-export-namespace-from",

    "@babel/plugin-transform-flow-strip-types",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": false
      }
    ],

    [
      "@babel/plugin-transform-runtime",
      {

      }
    ],

  ],
  "sourceMaps": true
}

package.json

{
...
"devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-export-default-from": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^9.0.0",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-plugin-react-require": "^3.0.0",
    "babel-plugin-require-context-polyfill": "^1.0.0",
    "eslint": "^5.5.0",
    "eslint-plugin-flowtype": "^2.50.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-prettier": "^2.6.2",
    "eslint-plugin-react": "^7.11.1",
    "eslint-plugin-react-native": "^3.3.0",
    "flow-bin": "^0.80.0",
    "flow-typed": "^2.5.1",
    "husky": "0.14.3",
    "jest": "^23.6.0",
    "prettier": "^1.14.2",
    "react-test-renderer": "^16.5.0"
  },
"dependencies": {
    "@babel/polyfill": "^7.0.0",
    "@babel/runtime": "^7.0.0",
    "autobind-decorator": "^2.1.0",
    "bluebird": "^3.5.1",
    "cancelable-promise": "^2.4.1",
    "color": "^3.0.0",
    "di-ninja": "^1.10.2",
    "immer": "^1.5.0",
    "locale2": "^2.3.1",
    "lodash": "^4.17.10",
    "lodash.memoize": "^4.1.2",
    "moment": "^2.22.2",
    "moment-timezone": "^0.5.21",
    "native-base": "^2.8.0",
    "promise-poller": "^1.6.0",
    "react": "^16.5.0",
    "react-native": "^0.57.0-rc.4",
    "react-native-config": "^0.11.5",
    "react-native-maps": "^0.21.0",
    "react-native-vector-icons": "^5.0.0",
    "react-navigation": "^2.13.0",
    "react-redux": "^5.0.7",
    "read-babelrc-up": "^0.3.0",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "shortid": "^2.2.13"
  },
  ...
}

and I added in my app's code
import '@babel/polyfill'

hope this helps

react-native-bot · 2018-09-12T12:05:22Z

It looks like you are using an older version of React Native. Please update to the latest release, v0.57 and verify if the issue still exists.

The ":rewind:Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

m-vdb · 2018-09-18T14:48:02Z

@TakioN I tried your suggestion but it didn't work for me... Using react-native 0.57 and the issue only occurs on Android: react-native run-android triggers it

Edit: here is my babel.config.js:

module.exports = {
  "retainLines": true,
  "compact": true,
  "comments": false,
  "presets": [
    "@babel/env",
    "@babel/react",
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    "syntax-async-functions",
    "@babel/syntax-class-properties",
    ["@babel/proposal-decorators", { "legacy": true }],
    "@babel/proposal-class-properties",
    "@babel/proposal-object-rest-spread",
    "@babel/transform-runtime"
  ],
  "sourceMaps": false,
  "exclude": ["**/*.png", "**/*.jpg", "**/*.gif"]
};

and my package.json:

"dependencies": {
    "@babel/polyfill": "^7.0.0",
    "@babel/runtime": "^7.0.0",
    ...
    "react": "16.5.0",
    "react-native": "0.57.0",
    ...
},
"devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-syntax-class-properties": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^9.0.0",
    "babel-jest": "^23.6",
    "babel-plugin-syntax-async-functions": "^6.13.0",
    ...
}

devthejo · 2018-09-18T16:03:56Z

@m-vdb try to remove @babel/react, you don't need it as you have module:metro-react-native-babel-preset and maybe try to move @babel/syntax-class-properties after @babel/proposal-decorators and as you have legacy: true to proposal-decorators you have to set loose: false to @babel/proposal-class-properties and maybe try to remove the preset env.

m-vdb · 2018-09-19T07:04:42Z

thanks a lot @TakioN 🙏all your recommendations together fixed it! (then I stumbled upon an other error, #20588, and I managed to fixed that too, I think).

key takeaway: cleanup babel config and rely on module:metro-react-native-babel-preset plugin. Documentation is scarce so I looked into the code of the plugin to know which plugin I needed to include or not.

Aleksion · 2018-09-25T01:01:33Z

Wow, this error is frustrating. I've tried all of the above to no avail. And there's very little information to go on. I figured it might be because of either the fact that I use typescript and/or storybook, but the only way to find out is removing EVERYTHING and the re-add one dependency at a time. A maneuver that's extremely painful when you have a production ready app.

Aleksion · 2018-09-25T01:17:21Z

I even hit this error when I init a completely new project with react-native init

NOTES:

I've erased everything on the simulator
I've reset watchman
I've created a completely new project

Steps to reproduce:

react-native init test
react-native run-ios

Following error:

yarn add -D @babel/runtime
react-native run-ios

And we're at it again:

My react-native info:


  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
      Memory: 843.64 MB / 32.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.9.0 - /usr/local/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/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.5.0 => 16.5.0
      react-native: 0.57.1 => 0.57.1
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Well I might as well give up on the migration if it doesn't even work for a completely new project 😭

keijohyttinen · 2018-09-29T12:43:16Z

Nothing worked for me until I did reset the transform cache:

react-native start --reset-cache

Now it works with package.json

"dependencies": {
    "@babel/polyfill": "^7.0.0",
    "@babel/runtime": "^7.1.2",
    "react": "16.5.0",
    "react-native": "0.57.0",
    "react-navigation": "^2.16.0",
    "relay": "^0.8.0-1"
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-transform-async-to-generator": "^7.1.0",
    "@babel/plugin-transform-flow-strip-types": "^7.0.0",
    "@babel/plugin-transform-regenerator": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.0.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^23.6.0",
    "babel-plugin-relay": "^1.6.2",
    "jest": "^23.6.0",
    "metro-react-native-babel-preset": "^0.45.6",
    "react-test-renderer": "16.6.0-alpha.0",
    "regenerator-runtime": "^0.12.1"
  },

and babel.config.js

module.exports = function (api) {
    api.cache(true)
    const presets = [
        "module:metro-react-native-babel-preset"
    ];
    const plugins = [
        "@babel/plugin-transform-flow-strip-types",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-transform-regenerator",
        "@babel/plugin-transform-async-to-generator",
        "@babel/plugin-transform-runtime"
    ];

    return {
        presets,
        plugins,
        'sourceMaps': true,
    };
}

Looks like root cause was transform caching failure..?

phyrian · 2018-09-29T13:16:28Z

Nothing worked for me until I did reset the transform cache:

react-native start --reset-cache

OMG. It worked for me as well. I spent 5 hours straight into this error, and I was trying many different .babelrc setups and none of them worked only because the packager cached the very first wrong one...

jstheoriginal · 2018-10-04T11:41:21Z

Thank you! Finally my app loads again after many many wasted hours! 🎉

Nothing worked for me until I did reset the transform cache:

react-native start --reset-cache

That's what seemed to do it for me.

Plus I also originally had this in my .babelrc file:

{
  "presets": [
    "module:metro-react-native-babel-preset",
    "@babel/env",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/proposal-class-properties",
    "@babel/proposal-object-rest-spread"
  ],
  "sourceMaps": true
}

The Typescript resource that RN linked to in RN 0.56 said to add those @babel presets/plugins...but in the end, but I guess that's only valid for React web, not RN, so I now just have this and it's working (but only after I ran that rest of the transform cache command above):

{
  "presets": [ "module:metro-react-native-babel-preset"  ],
  "sourceMaps": true
}

kelset · 2018-10-05T12:52:30Z

So, it seems to me that the solution is simply to reset the cache of the bundler, and is not an actual bug of the react-native codebase.

Can this be closed then?

mahmoudfelfel · 2018-10-06T14:37:01Z

had this error and fixed it by removing "@babel/preset-env" from the babel presets, then run react-native start --reset-cache

deecewan · 2018-10-07T12:31:45Z

I don't think the error was due to a stale bundler cache (see here). I eventually fixed mine by changing babel config, so I guess my issue is solved. I don't know/think the wider issue is resolved, but I no longer have a horse in this race. Close if you like.

Edit: In fact, I think the issue you referenced (#21475) shows that it's happening in fresh projects. Is the thinking that it's happening because they already had a bundler cache?

kelset · 2018-10-08T08:56:08Z

Ok it seems that it's babel config related, so mostly a single project issue or Metro one. Atm when installing a new project it should be created with Metro 0.48+ which should fix these issues. We'll also do a new 0.57.3 soon to make sure that also "upgrading" uses it.

iamrommel · 2019-01-16T04:03:28Z

Nothing worked for me until I did reset the transform cache:

react-native start --reset-cache

OMG. It worked for me as well. I spent 5 hours straight into this error, and I was trying many different .babelrc setups and none of them worked only because the packager cached the very first wrong one...

this worked for me too

AmaarHassan · 2019-04-04T10:09:07Z

For those whose cache clearing didn't work. Try deleting .bablerc file. It has its own ways of effecting cache. Mine issues was only resolved after i deleted this.
I came across this when i was porting my react native app to web using react-native-web .

Platforms:

expo
react native
react native web

josecarlosns · 2019-07-18T12:25:48Z

I ran into this issue today. For me, it was the airbnb preset that I was using, removing it from babel.config.js solved the issue.

react-native-bot added Platform: iOS iOS applications. Platform: Android Android applications. labels Sep 11, 2018

react-native-bot added the ⏪Old Version label Sep 12, 2018

helenaford mentioned this issue Sep 15, 2018

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

Closed

3 tasks

kelset mentioned this issue Oct 5, 2018

Can't find variable: require #21475

Closed

kelset added Tech: Bundler 📦 This issue is related to the bundler (Metro, Haul, etc) used. and removed Platform: Android Android applications. Platform: iOS iOS applications. ⏪Old Version labels Oct 5, 2018

kelset closed this as completed Oct 8, 2018

SMJ93 mentioned this issue Oct 18, 2018

Module @babel/runtime/helpers/interopRequireDefault does not exist in the Haste module map #21310

Closed

BodhiHu mentioned this issue Nov 17, 2018

[iOS][Android] Can't find variable: require (http://10.0.2.2:8081/index.android.delta ... #22321

Closed

alechp mentioned this issue Jul 16, 2019

@babel/runtime/helpers/interopRequireDefault in v0.2.4 servexyz/protato-cli#2

Open

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[0.56.0][iOS][Android] Can't find variable: require #21048

[0.56.0][iOS][Android] Can't find variable: require #21048

deecewan commented Sep 11, 2018

devthejo commented Sep 11, 2018

deecewan commented Sep 11, 2018

devthejo commented Sep 11, 2018

devthejo commented Sep 12, 2018

react-native-bot commented Sep 12, 2018

m-vdb commented Sep 18, 2018 •

edited

Loading

devthejo commented Sep 18, 2018

m-vdb commented Sep 19, 2018

Aleksion commented Sep 25, 2018

Aleksion commented Sep 25, 2018

keijohyttinen commented Sep 29, 2018

phyrian commented Sep 29, 2018

jstheoriginal commented Oct 4, 2018 •

edited

Loading

kelset commented Oct 5, 2018 •

edited

Loading

mahmoudfelfel commented Oct 6, 2018

deecewan commented Oct 7, 2018 •

edited

Loading

kelset commented Oct 8, 2018

iamrommel commented Jan 16, 2019

AmaarHassan commented Apr 4, 2019

josecarlosns commented Jul 18, 2019

[0.56.0][iOS][Android] Can't find variable: require #21048

[0.56.0][iOS][Android] Can't find variable: require #21048

Comments

deecewan commented Sep 11, 2018

Environment

Description

Reproducible Demo

devthejo commented Sep 11, 2018

deecewan commented Sep 11, 2018

devthejo commented Sep 11, 2018

devthejo commented Sep 12, 2018

react-native-bot commented Sep 12, 2018

m-vdb commented Sep 18, 2018 • edited Loading

devthejo commented Sep 18, 2018

m-vdb commented Sep 19, 2018

Aleksion commented Sep 25, 2018

Aleksion commented Sep 25, 2018

keijohyttinen commented Sep 29, 2018

phyrian commented Sep 29, 2018

jstheoriginal commented Oct 4, 2018 • edited Loading

kelset commented Oct 5, 2018 • edited Loading

mahmoudfelfel commented Oct 6, 2018

deecewan commented Oct 7, 2018 • edited Loading

kelset commented Oct 8, 2018

iamrommel commented Jan 16, 2019

AmaarHassan commented Apr 4, 2019

josecarlosns commented Jul 18, 2019

m-vdb commented Sep 18, 2018 •

edited

Loading

jstheoriginal commented Oct 4, 2018 •

edited

Loading

kelset commented Oct 5, 2018 •

edited

Loading

deecewan commented Oct 7, 2018 •

edited

Loading