Uncaught Error: Module parse failed: Unexpected token

[cs-manughian]

I installed the package using the recommended approach:

npx expo install react-native-gifted-charts expo-linear-gradient react-native-svg

With the following react typescript versions and ts config:

npm list:

├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

ts.config:

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "jsx": "react-jsx",
    "strict": true
  },
  "include": [
    "**/*.ts",
    "**/*.tsx"
  ]
}

Then, when I run my app in the web emulator, I get this error and nothing is rendered:

bootstrap:27 Uncaught Error: Module parse failed: Unexpected token (3:7)
File was processed with these loaders:
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| import { useEffect, useMemo, useState } from 'react'
| import {
>   type lineConfigType,
|   type BarChartPropsType,
|   type barDataItem,
    at ./node_modules/gifted-charts-core/src/BarChart/index.ts (fontfaceobserver.standalone.js:8:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/gifted-charts-core/src/index.js (fontfaceobserver.standalone.js:8:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/react-native-gifted-charts/src/Components/AnimatedThreeDBar/index.tsx (styles.tsx:47:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/react-native-gifted-charts/src/BarChart/RenderBars.tsx (Animated2DWithGradient.tsx:197:1)

I tried updating my app.json to include the packages like so, but it had no effect:

    "web": {
      "favicon": "./assets/icons/icon-1024.png",
      "build": {
        "babel": {
          "include": [
            "react-native-gifted-charts",
            "expo-linear-gradient",
            "react-native-svg"
          ]
        }
      }
    },

I really want to use this package but it doesn't seem to function with my project. Does anyone have any advice? Thank you!

[Abhinandan-Kushwaha]

Hi @cs-manughian did you get any solution?

[cs-manughian]

@Abhinandan-Kushwaha Unfortunately no, I had to use another package.

[dogankablan]

Hello, we have found a solution for this issue, it is available here.

https://gist.github.com/araphiel/b3d13ade7f9fe69e99c3d053196557d2

@cs-manughian @Abhinandan-Kushwaha

[Abhinandan-Kushwaha]

Hi @cs-manughian @dogankablan react-native-gifted-charts is now shipping compiled js files instead of ts files from version 1.4.22 onwards. This should fix all type related issues. 🎉