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

[carsten-walther]

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.

• [x] All peer dependencies are installed: React, ReactDOM and Leaflet.
• [x] Using a supported version of React and ReactDOM (v17.0.0 minimum).
• [x] Using the supported version of Leaflet (v1.7.1 minimum) and its corresponding CSS file is loaded.
• [x] Using the latest v3 version of React-Leaflet.
• [x] The issue has not already been reported.
• [x] Make sure you have followed the quick start guide for Leaflet.
• [x] 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

• follow https://react-leaflet.js.org/docs/start-setup and run yarn start

[Gimhan-minion]

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

[carsten-walther]

No, unfortunately not.

[Mimieye]

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

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]

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]

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]

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

[jagribble]

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]

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

[jagribble]

@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]

@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]

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]

https://github.com/facebook/create-react-app/issues/9468#issuecomment-694191642 worked for me

[stassb129]

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

thank you so match !!!

[DenyCelestino]

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

[stassb129]

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

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

[DenyCelestino]

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

[wkhughes]

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]

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

[DenyCelestino]

@Arodriguez14 I will try this too, thnks

[DenyCelestino]

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