I'm quite new to the front end - trying to implement client side on React. After adding "react-native" dependency and running webpack I'm getting the following error:
ERROR in ./node_modules/react-native/index.js 13:7
Module parse failed: Unexpected token (13:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 'use strict';
|
> import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
| import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator';
| import typeof Button from './Libraries/Components/Button';
@ ./node_modules/@react-navigation/native/lib/module/useBackButton.js 2:0-43 5:25-36
@ ./node_modules/@react-navigation/native/lib/module/index.js
@ ./src/main/js/app.js
I have the following dependencies in package.json:
"dependencies": {
"@react-native-community/masked-view": "^0.1.7",
"@react-navigation/native": "^5.1.4",
"@react-navigation/stack": "^5.2.9",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-native": "^0.62.1",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.7.1",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.4.0",
"rest": "^2.0.0"
},
"scripts": {
"watch": "webpack --watch -d"
},
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.0",
"@babel/preset-react": "^7.9.4",
"babel-loader": "^8.1.0",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11"
}
I assume that "typeof" operator is not recognized, but why?
I just spent a few hours dealing with this exact issue.
First, you can try adding "@babel/preset-flow" to your .babelrc file (after installing). That was recommended here, but didn't actually work for me.
What worked for me was just adding externals: { "react-native": true }, to my webpack.config.js file. My config file ended up looking like this:
const path = require("path")
module.exports = {
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
},
externals: {
"react-native": true,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
// ...
],
},
}
My understanding is that react-native is a dependency, so @babel/preset-flow didn't actually get triggered to help interpret the flow formatting in those files - it may only handle files in the main "entry" location of your webpack.config.js file.
Hopefully this helps someone out there. Feel free to comment on this answer if I'm a bit off-base and I'll update this :)
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments