Unhandled JS Exception: Can't find variable: require

Question

React native Version: 0.57.3

Android: Google Pixel 3 API - 28

iOS: iPhone 8 plus - 11.4

react-native-web: 0.10.0

I am trying to run my react-native-web app which is running fine on the web. I have run into this issue after trying to solve babel plugin issues on mobile side. I have used babel-upgrade for auto babel upgrade. I am posting my package.json and babelrc here.

package.json :

"devDependencies": {
        "@babel/cli": "^7.0.0",
        "@babel/core": "^7.0.0",
        "@babel/plugin-syntax-dynamic-import": "^7.0.0",
        "@babel/preset-env": "^7.0.0",
        "@babel/preset-flow": "^7.0.0",
        "@babel/preset-react": "^7.0.0",
        "babel-eslint": "^9.0.0",
        "babel-jest": "^23.4.2",
        "babel-loader": "8.0.0-beta.0",
        "babel-plugin-module-resolver": "3.2.0",
        "babel-plugin-react-native-web": "0.8.4",
        "babel-preset-react-native": "5.0.2",
        "jest": "23.2.0",
        "metro": "^0.52.0",
        "metro-core": "^0.52.0"
    },
    "dependencies": {
        "@babel/core": "^7.0.0",
        "@babel/plugin-proposal-class-properties": "^7.0.0",
        "@babel/plugin-proposal-decorators": "^7.0.0",
        "@babel/plugin-proposal-do-expressions": "^7.0.0",
        "@babel/plugin-proposal-export-default-from": "^7.0.0",
        "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
        "@babel/plugin-proposal-function-bind": "^7.0.0",
        "@babel/plugin-proposal-function-sent": "^7.0.0",
        "@babel/plugin-proposal-json-strings": "^7.0.0",
        "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
        "@babel/plugin-proposal-numeric-separator": "^7.0.0",
        "@babel/plugin-proposal-optional-chaining": "^7.0.0",
        "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
        "@babel/plugin-proposal-throw-expressions": "^7.0.0",
        "@babel/plugin-syntax-dynamic-import": "^7.0.0",
        "@babel/plugin-syntax-import-meta": "^7.0.0",
        "@babel/polyfill": "^7.0.0",
        "@babel/preset-env": "^7.0.0",
        "@babel/preset-react": "^7.0.0",
        "@sentry/browser": "4.5.3",
        "axios": "0.18.0",
        "babel-plugin-module-resolver": "3.2.0",
        "babel-polyfill": "^6.26.0"
    }

.babelrc :

"presets": [
    "@babel/env",
    "@babel/preset-react",
    "react-native",
    "@babel/preset-flow",
    "module:metro-react-native-babel-preset"
],
"plugins": [
    "@babel/plugin-transform-async-to-generator",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-json-strings",
    [
        "@babel/plugin-proposal-decorators",
        {
            "legacy": true
        }
    ],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    "@babel/plugin-proposal-optional-chaining",
    [
        "@babel/plugin-proposal-pipeline-operator",
        {
            "proposal": "minimal"
        }
    ],
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-do-expressions",
    "@babel/plugin-proposal-function-bind"
],
"sourceMaps": true

These are the solutions I have tried so far and didn't work :

1) react-native start --reset-cache

2) Remove all node_modules and install them again

Arnaud Leymet · Accepted Answer · 2021-02-11 08:19:28Z

5

Change your .babelrc file to:

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

Remove other stuff from the .babelrc file. As the other presets and plugins are valid for the React and not required for react-native.

After doing this start your packager with resetting the cache by executing the following command.

react-native start --reset-cache

Please refer this GitHub comments

edited Feb 11, 2021 at 8:19

Arnaud Leymet

6,1445 gold badges37 silver badges52 bronze badges

answered Feb 28, 2019 at 9:54

Bhagwat K

3,1922 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Biplov Kumar Over a year ago

It helped. Explanation is also good

Babou Over a year ago

I am having the same issue but I do not have the .babelrc file. Any idea how to fix it?

Collectives™ on Stack Overflow

Unhandled JS Exception: Can't find variable: require

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related