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

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.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 5
Comments: 20 (3 by maintainers)

Most upvoted comments

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

+22

mahmoudfelfel on Oct 6, 2018

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…?

+10

keijohyttinen on Sep 29, 2018

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 “⏪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.

react-native-bot on Sep 12, 2018

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…

phyrian on Sep 29, 2018

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

devthejo on Sep 18, 2018

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

devthejo on Sep 12, 2018

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.

kelset on Oct 8, 2018

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
}

jstheoriginal on Oct 4, 2018

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?

kelset on Oct 5, 2018

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.

m-vdb on Sep 19, 2018