React-native: [0.56.0][iOS][Android] Can't find variable: require

[deecewan]

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

[devthejo]

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

[deecewan]

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]

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]

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]

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]

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

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

thanks a lot @takion 🙏all your recommendations together fixed it! (then I stumbled upon an other error, https://github.com/facebook/react-native/issues/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]

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]

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:

1. react-native init test
2. react-native run-ios

Following error:

1. yarn add -D @babel/runtime
2. 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]

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]

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]

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]

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]

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

[deecewan]

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]

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]

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]

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]

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.