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 ?
- How To Solve Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41) Error ?
- Solution 1
- Solution 2
- Solution 3
- Summery
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
Solution 1 worked for me.