'How to resolve React Native Web error "This experimental syntax requires enabling one of the following parser plugin(s): 'jsx', 'flow', 'typescript'."
I have been working on a react-native-web project without issue and recently added the react-native-gifted-charts module which is when I began receiving this error:
/node_modules/react-native-gifted-charts/src/PieChart/index.tsx:135:12:
This experimental syntax requires enabling one of the following parser
plugin(s): "jsx", "flow", "typescript".
133 | });
134 | pData = __spreadArray([0], pData, true);
135 | return (<react_native_1.View style={[
| ^
136 | {
137 | backgroundColor: backgroundColor,
138 | height: semiCircle ? canvasHeight / 2 : canvasHeight,
I have scoured the interwebs for an answer, but none of the related solutions have resolved this error. These are the steps I have taken so far:
- Installed eslint to create a .eslintrc.js file (configured for Typescript and React using the console prompts)
- Installed @typescript-eslint/eslint-plugin, @typescript-eslint/eslint-plugin-tslint, and @typescript-eslint/parser (did nothing to further configure)
- Installed babel-plugin-react-native-web, @babel/core, @babel/eslint-parser, @babel/parser, @babel/preset-env, @babel/preset-react, and @babel/preset-typescript
- Created babel.config.json file configured as shown below
- Replaced .eslintrc.js with .eslintrc.json and configured as shown below
- Posted on the board of the react-native-gifted-charts package with no response yet
Here are my files as they stand currently:
.eslintrc.json:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
["@babel/preset-typescript",
{"isTSX": true}
]
],
"plugins": [
"jsx",
"typescript"
]
}
babel.config.json:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
["@babel/preset-typescript",
{"isTSX": true}
]
],
"plugins": [
"jsx",
"typescript"
]
}
package.json
{
"name": "project",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.17.10",
"@babel/eslint-parser": "^7.17.0",
"@babel/parser": "^7.17.10",
"@babel/preset-env": "^7.17.10",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@typescript-eslint/eslint-plugin": "^5.22.0",
"@typescript-eslint/parser": "^5.22.0",
"eslint": "^8.14.0",
"eslint-plugin-react": "^7.29.4",
"parcel-bundler": "^1.12.5",
"typescript": "^4.6.4"
},
"dependencies": {
"@types/react-native": "^0.66.15",
"express": "^4.17.2",
"mysql": "^2.18.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-native-gifted-charts": "^1.2.16",
"react-native-linear-gradient": "^2.5.6",
"react-native-svg": "^12.3.0",
"react-native-web": "^0.17.5"
},
"scripts": {
"start": "parcel serve ./index.html",
"build": "parcel build ./index.html"
},
"alias": {
"react-native": "react-native-web"
}
}
tsconfig.json
{
"compilerOptions": {
"jsx": "react",
"lib": ["ES6", "DOM"],
"target": "esnext",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"moduleResolution": "node",
"noEmit": true,
"skipLibCheck": true
},
"exclude": ["./node_modules"]
}
I feel like I'm missing how to point the parser at this particular node_modules folder? I am very much beyond my basic understanding.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|