14

I've just started a brand new project using create-react-app and set up react-leaflet as their documentation recommends here.

I am trying to use this example to check if it's all working good but then I'm receiving the following error:

./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/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   useEffect(function updatePathOptions() {
|     if (props.pathOptions !== optionsRef.current) {
>       const options = props.pathOptions ?? {};
|       element.instance.setStyle(options);
|       optionsRef.current = options;

Looks like react-scripts can't handle react-leaflet files. Can someone helps me to understand why it's happening and how do I fix it ?

Victor Seara
  • 141
  • 1
  • 3
  • There is already a discussion of this going on over here: [How to fix error “Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)”](https://stackoverflow.com/questions/67552020/how-to-fix-error-failed-to-compile-node-modules-react-leaflet-core-esm-pat) – Seth Lutske May 16 '21 at 18:18
  • Does this answer your question? [How to fix error "Failed to compile : ./node\_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)"](https://stackoverflow.com/questions/67552020/how-to-fix-error-failed-to-compile-node-modules-react-leaflet-core-esm-pat) – kboul May 27 '21 at 10:03

1 Answers1

16

After reading about it on all blogs , I have concluded that : It's because of the new version of the react-leaflet. I faced the same problem and here's how I got rid of the error:

Open your 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"
]
},

Replace it with following lines :

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

  • Now Delete node_modeules/.cache folder

  • npm install

  • npm start

Another method is to just add these lines in your package.json file:

"react-leaflet": ">=3.1.0 <3.2.0 || ^3.2.1",
"@react-leaflet/core": ">=1.0.0 <1.1.0 || ^1.1.1"
Vidhu Verma
  • 223
  • 1
  • 11