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

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

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

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.

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.

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

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.

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