[Solved] Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)

Hello Guys, How are you all? Hope You all Are Fine. Today I was trying to create a react-typescript app along with a leaflet. But when I start the application it says, Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41) Javascript. So Here I am Explain to you all the possible solutions here.

Without Wasting your time, Lets start This Article to Solve This Error.

How Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41) Error Occurs ?

Today I was trying to create a react-typescript app along with a leaflet. But when I start the application it says, Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)

    ./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   useEffect(function updatePathOptions() {

Here is my browserslist of my package.json file.

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

How To Solve Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41) Error ?

Question: How To Solve Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41) Error ?
Answer: The issue eventually seems to be related with create-react-app and the way it bundles files and seems to be resolved if you replace browser targets from: Simple solution for now is you have to make change your package.json and edit browserslist. Follow below all step.

Solution 1

The issue eventually seems to be related with create-react-app and the way it bundles files and seems to be resolved if you replace browser targets from:

Simple solution for now is you have to make change your package.json and edit browserslist. Follow below all step.

• Open your package.json file.
• Edit your browserslist as follows.

 "browserslist": {
   "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
},

Replace above line with following code.

"browserslist": [
   ">0.2%",
  "not dead",
  "not op_mini all"
],

• Then,  Delete node_modeules/.cache directory.
• npm install
• npm start
• Boom Now your error might be solved.

Solution 2

We are running into the same problem. We have added the following lines in our package.json for now to skip the newly released 1.1.0 version of the @react-leaflet/core package as a quickfix:

"react-leaflet": ">=3.1.0 <3.2.0 || ^3.2.1",
"@react-leaflet/core": ">=1.0.0 <1.1.0 || ^1.1.1"

Solution 3

Also you can solve this issue by downgrading leaflet version to “react-leaflet”: “2.7.0”

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also Read

• SyntaxError: invalid syntax to repo init in the AOSP code.