Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Module parse failed: Unexpected token (10:41) in @react-leaflet/core/esm/path.js #877

Closed
7 tasks done
carsten-walther opened this issue May 16, 2021 · 47 comments
Closed
7 tasks done

Comments

@carsten-walther
Copy link

carsten-walther commented May 16, 2021

Bug report

Before opening an issue, make sure to read the contributing guide and understand this is a bug tracker, not a support platform.

Please make sure to check the following boxes before submitting an issue.
Issues opened without using this template will be closed unless they have a good reason not to follow this template.

  • All peer dependencies are installed: React, ReactDOM and Leaflet.
  • Using a supported version of React and ReactDOM (v17.0.0 minimum).
  • Using the supported version of Leaflet (v1.7.1 minimum) and its corresponding CSS file is loaded.
  • Using the latest v3 version of React-Leaflet.
  • The issue has not already been reported.
  • Make sure you have followed the quick start guide for Leaflet.
  • Make sure you have fully read the documentation and that you understand the limitations.

Expected behavior

TypeScript should compile successfully.

Actual behavior

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

Steps to reproduce

@Gimhan-minion
Copy link

I do have the exact same issue. @carsten-walther Did you find out a way to fix the bug?

@carsten-walther
Copy link
Author

No, unfortunately not.

@Mimieye
Copy link

Mimieye commented May 16, 2021

I have a similar issue about this. But the error occurs in pane.js file
1取

I just import react-leaflet and this error occur, it seem like something wrong with nullish coalescing operator?
I don't know how to fix this, I need some help, thank you!

@mostfamiliar
Copy link

I'm experiencing this issue as well. Like @Mimieye said it's related to the nullish coalescing operator. When I strip those out, I am able to compile.

@PaulLeCam
Copy link
Owner

This is not an issue with React Leaflet but with your bundler or similar tool's support or configuration, please raise the issue in the relevant repository.

@stassb129
Copy link

how to fix ?????????????

@jagribble
Copy link

jagribble commented May 16, 2021

If anyone is having issues with this make sure that your bundling tool is able to handle the nullish coalescing operator.

For babel you can use the @babel/plugin-proposal-nullish-coalescing-operator. Although make sure that you don't exclude node_modules in the rule. (This should be included in @babel/preset-env from the documentation)

It is related to facebook/create-react-app#9468 for those using CRA

@Arodriguez14
Copy link

I do have the exact same issue. @carsten-walther Did you find out a way to fix the bug?

@jagribble
Copy link

@Arodriguez14 This is that most people will exclude node_modules when bundling (correctly). This means that the ?? in the project causes issues as the bundler doesn't know what to do with it. If you allow the rule (babel-loader for webpack for example) to run with node_modules too you should be ok (providing you don't need the plugin).

Ideally, this wouldn't be the case. By adding --plugins @babel/plugin-proposal-nullish-coalescing-operator to the babel cli script that is run when generating the esm module this would mean that your bundler would not need to include this module. @PaulLeCam is this something that could be added?

@stassb129
Copy link

@Arodriguez14 This is that most people will exclude node_modules when bundling (correctly). This means that the ?? in the project causes issues as the bundler doesn't know what to do with it. If you allow the rule (babel-loader for webpack for example) to run with node_modules too you should be ok (providing you don't need the plugin).

Ideally, this wouldn't be the case. By adding --plugins @babel/plugin-proposal-nullish-coalescing-operator to the babel cli script that is run when generating the esm module this would mean that your bundler would not need to include this module. @PaulLeCam is this something that could be added?

But if CRA?

@jagribble
Copy link

jagribble commented May 16, 2021

But if CRA?

I mean sure maybe there is something else? But could also be that CRA is excluding node_modules meaning that it is a similar situation right? Guess what I'm saying is more of an observation rather than the definite solution

@siner308
Copy link

facebook/create-react-app#9468 (comment) worked for me

@stassb129
Copy link

facebook/create-react-app#9468 (comment) worked for me

thank you so match !!!

@DenyCelestino
Copy link

@carsten-walther I have the same problem, did you manage to solve it?

@stassb129
Copy link

@carsten-walther I have the same problem, did you manage to solve it?

facebook/create-react-app#9468 (comment)

@DenyCelestino
Copy link

@stassb129 this way it’s not working, I don’t know what’s going on

@wkhughes
Copy link

facebook/create-react-app#9468 (comment) worked for me

This worked for me. Although I also had to delete the node_modules/.cache per the CRA supported browsers docs:

When editing the browserslist config, you may notice that your changes don't get picked up right away. This is due to an issue in babel-loader not detecting the change in your package.json. A quick solution is to delete the node_modules/.cache folder and try again.

@Arodriguez14
Copy link

Removing node_modules/.cache worked for me. Thank to all!!!!

@DenyCelestino
Copy link

DenyCelestino commented May 17, 2021

@Arodriguez14 I will try this too, thnks

@DenyCelestino
Copy link

DenyCelestino commented May 17, 2021

@Arodriguez14 thank you very much changing the browser list and deleting the node_module / .cache worked

@tony-stark-edith
Copy link

tony-stark-edith commented May 18, 2021

As mentioned here,
libraries are normally not babelified so the published package should not contain future ES functionality. So I think best would be to create a new release which don't contain this ?? hints. Else everybody need to hack into its webpack package that a specific node_modules need to be babelified.

@federicoCapaccio
Copy link

I am facing the same issue but this fix does not help

facebook/create-react-app#9468 (comment) worked for me

@Gimhan-minion
Copy link

Gimhan-minion commented May 18, 2021

@federicoCapaccio Did you delete your node_modules/.cache after replacing the browerlist?

https://stackoverflow.com/a/67574280/15937882

You can refer this link to fix this issue :)

@bradstdev
Copy link

While I fixed it with instructions above using this CRA fix like many other here I suspect don't wish to target older browsers and ship the larger bundle size that goes with that.

@federicoCapaccio
Copy link

federicoCapaccio commented May 19, 2021

@federicoCapaccio Did you delete your node_modules/.cache after replacing the browerlist?

https://stackoverflow.com/a/67574280/15937882

You can refer this link to fix this issue :)

Yes i did it but it didn't work @Gimhan-minion

EDIT: for some reasons I had to delete the whole node_modules package and re-run yarn, but it worked! Thank You!

@cherouvim
Copy link

Even though the browserslist trick "fixed" the issue for me, my storybook was still broken with the same message. There is no way I'd ever want to attempt to fix storybook's configuration, so what I did was pin to the old version of the "core" library as others have mentioned:

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

I hope @PaulLeCam understands soon that react-leaflet is library code used by tons of client code (applications) which are currently broken. Maybe a better approach would be to release that ?? along with whatever other syntactic sugar is needed in a 4.0.0 release after also announcing the webpack version compatibility change in the changelog.

@jeron-diovis
Copy link

jeron-diovis commented May 19, 2021

@cherouvim With this configuration, @react-leaflet/core 1.1.0 installs as dependency of react-leaflet (nested node_modules folder), and explicit 1.0.2 is ignored. How did it work for you?

@cherouvim
Copy link

@jeron-diovis I'll redo this and confirm ASAP. I apologise in advance in case I got this totally wrong.

@cherouvim
Copy link

@jeron-diovis I used the exact version and I confirm that it works. Have a look at this (the 3rd block is the solution):

# Reproduce the problem with 3.2.0
cd /tmp
npx create-react-app error-3.2.0
cd error-3.2.0
npm install --save-exact leaflet@1.7.1
npm install --save-exact react-leaflet@3.2.0
printf "import React from 'react'; import ReactDOM from 'react-dom'; import { MapContainer } from 'react-leaflet'; const foo = <MapContainer />;" > src/index.js
npm start

# Reproduce the problem with 3.1.0
cd /tmp
npx create-react-app error-3.1.0
cd error-3.1.0
npm install --save-exact leaflet@1.7.1
npm install --save-exact react-leaflet@3.1.0
printf "import React from 'react'; import ReactDOM from 'react-dom'; import { MapContainer } from 'react-leaflet'; const foo = <MapContainer />;" > src/index.js
npm start

# Fix the problem with 3.1.0 + 1.0.2
cd /tmp
npx create-react-app fix-3.1.0-1.0.2
cd fix-3.1.0-1.0.2
npm install --save-exact leaflet@1.7.1
npm install --save-exact react-leaflet@3.1.0
npm install --save-exact @react-leaflet/core@1.0.2
printf "import React from 'react'; import ReactDOM from 'react-dom'; import { MapContainer } from 'react-leaflet'; const foo = <MapContainer />;" > src/index.js
npm start

@jeron-diovis
Copy link

jeron-diovis commented May 20, 2021

@cherouvim I confirm your example works.
But it appears, that somehow it works only with npm. My issue was that I used yarn.

With these deps:

"dependencies": {
  "@react-leaflet/core": "1.0.2",
  "react-leaflet": "3.1.0",
},

I have following results:

> npm install
...

> ls node_modules/react-leaflet
LICENSE.md   README.md    cjs          esm          package.json types        umd

> grep 'react-leaflet/core' -O package-lock.json
        "@react-leaflet/core": "1.0.2",
    "node_modules/@react-leaflet/core": {
      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.0.2.tgz",
        "@react-leaflet/core": "^1.0.2"
    "@react-leaflet/core": {
      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.0.2.tgz",
        "@react-leaflet/core": "^1.0.2"

> rm -rf node_modules package-lock.json

> yarn
...

> ls node_modules/react-leaflet
LICENSE.md   README.md    cjs          esm          node_modules package.json types        umd

> grep 'react-leaflet/core' -O yarn.lock
"@react-leaflet/core@1.0.2":
  resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-1.0.2.tgz#39c6a73f61c666d5dcf673741cea2672fa4bbae1"
"@react-leaflet/core@^1.0.2":
  resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-1.1.0.tgz#389b2b373f1da4caeb3c4cf6f33d84561c58d504"
    "@react-leaflet/core" "^1.0.2"

As you can see, with yarn installation there are versions 1.0.2 -> 1.0.2 and ^1.0.2 -> 1.1.0 in lockfile, and nested node_modules/react-leaflet/node_modules folder.
Not sure is it just me, or smth is wrong with yarn.

aasalazar23 added a commit to privateprep/coding-space-website that referenced this issue May 20, 2021
NOTE: At the time this commit was made, an error in bundler dealing
with es6 nullish coalescing operator in the react leaflet caused the
build to fail with an "unexpected token".

PaulLeCam/react-leaflet#877

The only way I could continue developing was to install an older version
of react leaflet. Once a real solution is available, we can bump up
to the latest version.

This commit is mainly to layout groundwork of what the class signup
page could look like. For development sake, it's been placed on the
homepage with fake data.
@danmoka
Copy link

danmoka commented May 20, 2021

@jeron-diovis I used the exact version and I confirm that it works. Have a look at this (the 3rd block is the solution):

# Reproduce the problem with 3.2.0
cd /tmp
npx create-react-app error-3.2.0
cd error-3.2.0
npm install --save-exact leaflet@1.7.1
npm install --save-exact react-leaflet@3.2.0
printf "import React from 'react'; import ReactDOM from 'react-dom'; import { MapContainer } from 'react-leaflet'; const foo = <MapContainer />;" > src/index.js
npm start

# Reproduce the problem with 3.1.0
cd /tmp
npx create-react-app error-3.1.0
cd error-3.1.0
npm install --save-exact leaflet@1.7.1
npm install --save-exact react-leaflet@3.1.0
printf "import React from 'react'; import ReactDOM from 'react-dom'; import { MapContainer } from 'react-leaflet'; const foo = <MapContainer />;" > src/index.js
npm start

# Fix the problem with 3.1.0 + 1.0.2
cd /tmp
npx create-react-app fix-3.1.0-1.0.2
cd fix-3.1.0-1.0.2
npm install --save-exact leaflet@1.7.1
npm install --save-exact react-leaflet@3.1.0
npm install --save-exact @react-leaflet/core@1.0.2
printf "import React from 'react'; import ReactDOM from 'react-dom'; import { MapContainer } from 'react-leaflet'; const foo = <MapContainer />;" > src/index.js
npm start

Worked for me. Thank you so match!

@gmarshall56
Copy link

I changed my package.json per @cherouvim recommendation:
"@react-leaflet/core": "1.0.2",
"react-leaflet": "3.1.0",

I then did a npm install --force, because npm install without force throws errors.
Now, when I do a npm start I am getting this:

./node_modules/react-leaflet/esm/MapContainer.js
Module parse failed: Unexpected token (34:2)
You may need an appropriate loader to handle this file type.
| style,
| whenCreated,
| ...options
| }) {
| const mapRef = useRef(null);

This is not good at all. This is a disaster. If I have to roll back to version 2.7.0 of react leaflet I will have to redo a bunch of code that I had originally written to take advantage of MapContainer's whenCreated prop to set state when the map is rendered. Now how do I do all of that using version 2.7.0, which does not have the MapContainer component defined in it? This is going to set me and my team behind significantly in our development. Can somebody put a fire under the a**es of the person / people who are responsible for this? Maybe we should have used ArcGIS.

@marcin-piechaczek
Copy link

For next.js project you can use

  future: {
    webpack5: true
  },

flag inside your next.config.js file

@slutske22
Copy link
Contributor

This is not an issue with React Leaflet but with your bundler or similar tool's support or configuration, please raise the issue in the relevant repository.

There are alot of duplicate issues going up in this repo surrounding this same issue. I am also participating in the create-react-app issue surrounding this problem, which was just closed with the following comment:

This is an issue with third-party packages so there's not much we can do about it. Package authors should generally not be compiling for esnext. Consider opening an issue with those packages.

The tsconfig for react-leaflet uses es2019, which I guess still does not transpile ?? to more primitive syntax. But I agree with the CRA comment. Considering react-leaflet is the premier react wrapper for leaflet, and create-react-app is the premier tool for react applications, written by the same org that wrote react itself, I feel like react-leaflet should indeed comply with their compatibility requirements. (Granted, I do not have this issue with a custom webpack/babel config and the latest version of react-leaflet, but I think CRA is a pretty good 'lowest-common-denominator' to shoot for in terms of compatibility of react component libraries).

@PaulLeCam how difficult would it really be to set target to es2018, or even something more primitive, like es5, rebuild, and republish under a minor version? Putting the burden of transpilation on program authors for node modules is sort of bad practice. I love react-leaflet, a lot, but I'm ready to throw my 🍅🍅🍅 as far as this issue is concerned.

@ATAKENNAME
Copy link

I got the same issues, and tried all the method mentioned in the facebook post, it didn't work. Any idea how to solve it?

@Frikster
Copy link

A PR is open to fix this issue here.

It is taking a long time to merge so the PR author has provided a temporary version of the package you could install that should fix all issues.

I've also found downgrading react-leaflet to fix things:

"react-leaflet": ">=3.1.0 <3.2.0 || ^3.2.1",
"@react-leaflet/core": ">=1.0.0 <1.1.0 || ^1.1.1"

I'm using a pretty bare-bones create-react-app with react-leaflet. It makes more sense to me that downgrading this package leading to a fixed issue means there is a problem with the latest version of this package that needs to be addressed. react-leaflet should conform to and maintain compatibility with create-react-app, not the other way around.

@gmarshall56
Copy link

15 days ago I made my posting here along with my rant. After placing that post I continued to trouble shoot this issue, chewing up much valuable development time.
After changing my package.json per @cherouvim recommendations, and starting with a fresh create-react-app, I discovered the version of react-scripts ("^1.1.5") in my package.json was different than the version in the fresh create-react-app. So, scrambling for a solution, I changed the version of react-scripts in my package.json to the same version that is in my fresh create-react-app ("4.0.3"), deleted the node_modules folder and the package-lock file and reinstalled with "npm install --force". It then built successfully.
For me, this issue has given npm a big black eye, but perhaps I didn't know any better. I was expecting npm to handle versioning issues the way that Spring Boot does.

@trevorr
Copy link

trevorr commented Jun 15, 2021

The best, long-term way to handle this for CRA users is to use react-app-rewired and customize-cra to transpile the latest version of react-leaflet to whatever version of JS you need: https://stackoverflow.com/a/67991412/123336

@teachermugabo
Copy link

This is not an issue with React Leaflet but with your bundler or similar tool's support or configuration, please raise the issue in the relevant repository.

In closing this issue, it would be helpful to point folx to solutions.

Customizing CRA (create-react-app) like so https://stackoverflow.com/a/67991412/558732 seems to be most promising but I still haven't gotten it to work yet.

@ucksylr
Copy link

ucksylr commented Aug 18, 2021

Removing node_modules/.cache worked for me. Thank to all!!!!

It works on me thank you

@ghost
Copy link

ghost commented Oct 12, 2021

Check this Solutions: (It's works on me)
https://exerror.com/failed-to-compile-node_modules-react-leaflet-core-esm-path-js-1041-module-parse-failed-unexpected-token-1041/

@mariczne
Copy link

@cherouvim I confirm your example works. But it appears, that somehow it works only with npm. My issue was that I used yarn.
As you can see, with yarn installation there are versions 1.0.2 -> 1.0.2 and ^1.0.2 -> 1.1.0 in lockfile, and nested node_modules/react-leaflet/node_modules folder. Not sure is it just me, or smth is wrong with yarn.

To fix this for yarn one can use resolutions key in package.json:

  "resolutions": {
    "@react-leaflet/core": "1.0.2"
  }
> grep 'react-leaflet/core' -0 yarn.lock
"@react-leaflet/core@1.0.2", "@react-leaflet/core@^1.0.2":
--
  resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-1.0.2.tgz#39c6a73f61c666d5dcf673741cea2672fa4bbae1"
--
    "@react-leaflet/core" "^1.0.2"

ellertsmari added a commit to ellertsmari/react-leaflet that referenced this issue Nov 17, 2021
Many of my students are having problems using react-leaflet because of issues reported in PaulLeCam#877,  PaulLeCam#880 and PaulLeCam#883. It seems to be a common problem: https://stackoverflow.com/questions/67552020/how-to-fix-error-failed-to-compile-node-modules-react-leaflet-core-esm-pat and there is even a video about the solution in YouTube with more than 1500 views: https://youtu.be/tFqj-JKYr4M
@alamothe
Copy link

It could be fixed with patch-package

@samirarezai
Copy link

samirarezai commented Apr 30, 2022

"react-scripts": "^5.0.1",
I updated the react-scripts package in package.json using yarn add react-scripts then my problems disappeared.

the version of my react-leaflet is

  "react-leaflet": "^4.0.0",
  "leaflet": "^1.8.0"

@Etienne-M
Copy link

Etienne-M commented May 16, 2022

This is not an issue with React Leaflet but with your bundler or similar tool's support or configuration, please raise the issue in the relevant repository.

That is 100% correct, but the fact remains that this isn't a niche bug. This library's sole purpose is to provide react bindings, and it will not bundle with the most common boilerplate for react. This means that first time users can't make this library work when following the installation steps, and when they go the list of open issues, they can't find anything related to that...

It would be worth adding a note to the documentation. Something like: "This library is transpiled to es2019, which isn't supported by create-react-app. To circumvent the issue, try a library to amend the build config (react-app-rewired or craco), or eject and modify the config."

@kpennell
Copy link

Hey Folks - CRA user here. I followed the steps above and it seems? to work

Changing 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 delete node_modules .cache

Re run yarn start

@weswithley
Copy link

weswithley commented Jul 1, 2022

This works for me with using Webpack only ( non-use CRA ) :

  • Make sure already installed the "@babel/plugin-proposal-nullish-coalescing-operator" plugin of babel-loader . comment 881117957
  • Remove the "node_modules" from "exclude" list in babel-loader. commnent 841883540

image

Although I think including the whole "node_modules" folder into the loader for parsing purpose isn't the best idea, but looks like a nice workaround for now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.