. Advertisement .
..3..
. Advertisement .
..4..
The error: “Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)” is a common error that can show up in many ways. In this blog, we will go through some of the ways you can fix this issue. Read on.
How To Solve The Error: “Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)”?
When attempting to make a react-typescript app with a leaflet and run the application, though, you may encounter an error saying: 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 can be your browserslist of the 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"
]
},
The problem appears to be tied to create-react-app and how it bundles files, and it appears to be remedied if browser targets are replaced. For the time being, the simplest answer is to modify your package. Edit the browserslist in json. All steps are listed below.
Approach 1: Modify your package
For the time being, the simplest way to solve ”“Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)” is modifying your package. Then you need to edit the browserslist in json. All steps are listed below. Let’s follow them to solve your problem well:
- The first step is opening the package.json file on your computer.
- The second step is executing the following changes to your browser’s list.
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
Now, you can substitute the following code for the above line:
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
],
- The third step is removing node_modeules/.cache directory. npm install npm start
- Finally, you have fixed your issue.
Approach 2: Dowgrade leaflet version to “react-leaflet”: “2.7.0”
You may also fix this problem by downgrading the version of leaflet to “react-leaflet“: “2.7.0”. This method looks like simple but it’s very effective. You will be unbelievable with its result, so let’s do it.
Approach 3: Use .json
The following lines have been added to your package. As a temporary workaround, you should use .json instead of the recently released 1.1.0 version of the @react-leaflet/core package. Look at the following guide to get your desired result.
"react-leaflet": ">=3.1.0 <3.2.0 || ^3.2.1",
"@react-leaflet/core": ">=1.0.0 <1.1.0 || ^1.1.1"
Now, the error ”Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)” completely disappear.
Conclusion
Above are some useful methods for you. We all hope that you will enjoy our article about the error. With this knowledge, we make certain that you can fix your error: “Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)” quickly by following these steps! If you still have any other questions about fixing this syntax error, please leave a comment below. Thank you for reading!
Leave a comment