Reputation: 3184
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
Upvotes: 3
Views: 5296
Reputation: 3142
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
Upvotes: 5