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 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.

From ?? Operator results in "Unexpected Token" err when used in package #9468:

 "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 the node_modules/.cache directory.

Then try npm install.

And npm start

Tadaaa!

References:

• ?? Operator results in "Unexpected Token" err when used in package #9468
• Module parse failed: Unexpected token (10:41) in @react-leaflet/core/esm/path.js #877

Module parse failed: additional babel_loader

In order to run it, the react-leaflet library must be downgraded.
These are the steps:

1. remove react-leaflet: npm uninstall react-leaflet

2. update your react-scripts version to 3.3.0 or higher: npm install --save react-scripts@latest

3. remove node_module directory (optional)

4. clean cache:
   npm cache clean --force

5. Install the working versions:
   npm i react-leaflet@3.1.0 @react-leaflet/core@1.0.2

You can now run the client doing npm start.

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

You are using unnecessary escape character: which is not required.

Replace test: '/\.(js|jsx)$/', with test: /\.js$|jsx/, it should work fine.

I replicated your issue in my machine and found the same which is resolved by the above fix.

hope this helps, happy coding!!!

---

Related Topics