How to fix error “Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)”

We Are Going To Discuss About How to fix error “Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)”. So lets Start this Javascript Article.

How to fix error “Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)”

How to solve How to fix error “Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)”

I found a way to fix it.
Steps to fix:-
Open your package.json file and 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" ] },
to
"browserslist": [ ">0.2%", "not dead", "not op_mini all" ],
Once you’ve done this, Delete node_modules/.cache directory.
Then try npm install
and npm start
Tadaaa!
References:-
https://github.com/facebook/create-react-app/issues/9468#issuecomment-694191642
https://github.com/PaulLeCam/react-leaflet/issues/877

How to fix error “Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)”

I found a way to fix it.
Steps to fix:-
Open your package.json file and 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" ] },
to
"browserslist": [ ">0.2%", "not dead", "not op_mini all" ],
Once you’ve done this, Delete node_modules/.cache directory.
Then try npm install
and npm start
Tadaaa!
References:-
https://github.com/facebook/create-react-app/issues/9468#issuecomment-694191642
https://github.com/PaulLeCam/react-leaflet/issues/877

Solution 1

I found a way to fix it.

Steps to fix:-

Open your package.json file and 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"
    ]
},

to

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

Once you’ve done this, Delete node_modules/.cache directory.

Then try npm install

and npm start

Tadaaa!

References:-

Original Author edited Dec 30, 2021 at 11:47 Of This Content

Solution 2

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:

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

to

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

Then stop the server and rerun it.

Credits go to bkiac official create-react-app github issue

Edit

You can reproduce the error and the fix if you download this codesandbox. When you open it, it works but if you download it and run it locally you can see the error using the first browserslist options in package.json. If you stop the server, replace browserslist options with the new and rerun the application you can see that it works as expected.

Original Author kboul Of This Content

Solution 3

I encountered this problem after I did an npm update.

These packages were installed:
"react-leaflet": "^3.2.0"

and as dependency (found in .lock):
"@react-leaflet/core": "1.1.0",

Forcing npm to use these versions, fixed it for me:

"@react-leaflet/core": "1.0.2",

"react-leaflet": "3.1.0",

So try npm i [email protected] @react-leaflet/[email protected]

Original Author SchitzelKraft Of This Content

Solution 4

I fixed the issue by change the browserslist as other have stated. My browserslist now looks like this:

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

I then did the following:

  1. Delete your node_modules folder
  2. Run npm cache clean --force
  3. Run npm install

Now everything should work as expected. If the map is not loaded, don’t forget to add the leaflet css and js to your page and set the height for your map-container. See the official documentation for more information.

Original Author mamen Of This Content

Conclusion

So This is all About This Tutorial. Hope This Tutorial Helped You. Thank You.

Also Read,

ittutorial team

I am an Information Technology Engineer. I have Completed my MCA And I have 4 Year Plus Experience, I am a web developer with knowledge of multiple back-end platforms Like PHP, Node.js, Python and frontend JavaScript frameworks Like Angular, React, and Vue.

Leave a Comment