'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:

  1. Installed eslint to create a .eslintrc.js file (configured for Typescript and React using the console prompts)
  2. Installed @typescript-eslint/eslint-plugin, @typescript-eslint/eslint-plugin-tslint, and @typescript-eslint/parser (did nothing to further configure)
  3. Installed babel-plugin-react-native-web, @babel/core, @babel/eslint-parser, @babel/parser, @babel/preset-env, @babel/preset-react, and @babel/preset-typescript
  4. Created babel.config.json file configured as shown below
  5. Replaced .eslintrc.js with .eslintrc.json and configured as shown below
  6. 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