Can't compile react-leaflet #891

pkdhital · 2021-06-06T04:15:39Z

Bug report

Can't compile blank react app after adding react-leaflet. Throws following error:
`

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

`

Expected behavior

Should compile and be able to use react leaflet

Steps to reproduce

npx create-react-app test
cd test
npm install leaflet react-leaflet
add import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet' on src/App.js
npm start

Edit

For me #891 (comment) this resolved issue, but comments below indicate it's not working for everybody. Please try this and check if it's working for you or not.

The text was updated successfully, but these errors were encountered:

MGraefe · 2021-06-07T15:26:56Z

Having the same issue, related thread in create-react-app:

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

Picked up a lot of activity in the last ~20 days. See last comments for remarks from react guys.

vyemialyanchyk · 2021-06-11T18:37:03Z

`Failed to compile.

./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() {
| if (props.pathOptions !== optionsRef.current) {

  const options = props.pathOptions ?? {};

| element.instance.setStyle(options);
| optionsRef.current = options;
`

the same issue

vyemialyanchyk · 2021-06-11T18:49:52Z

`Failed to compile.

./node_modules/@react-leaflet/core/esm/pane.js 2:27
Module parse failed: Unexpected token (2:27)
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.
| export function withPane(props, context) {

const pane = props.pane ?? context.pane;
| return pane ? { ...props,
| pane`

vyemialyanchyk · 2021-06-11T18:52:25Z

`Failed to compile.

./node_modules/@react-leaflet/core/esm/layer.js 8:46
Module parse failed: Unexpected token (8:46)
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.
| export function useLayerLifecycle(element, context) {
| useEffect(function addLayer() {

const container = context.layerContainer ?? context.map;

| container.addLayer(element.instance);
| return function removeLayer() {

`

vyemialyanchyk · 2021-06-11T19:08:32Z

`Failed to compile.

./node_modules/react-leaflet/esm/Pane.js 25:37
Module parse failed: Unexpected token (25:37)
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.
| }
|

const parentPaneName = props.pane ?? context.pane;
| const parentPane = parentPaneName ? context.map.getPane(parentPaneName) : undefined;
| const element = context.map.createPane(name, parentPane);

`

vyemialyanchyk · 2021-06-11T19:11:34Z

`Failed to compile.

./node_modules/react-leaflet/esm/MapContainer.js 72:30
Module parse failed: Unexpected token (72:30)
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.
| const contents = context ? /#PURE/React.createElement(LeafletProvider, {
| value: context

}, children) : placeholder ?? null;
| return /#PURE/React.createElement("div", _extends({}, props, {
| ref: mapRef

`

vyemialyanchyk · 2021-06-11T19:13:41Z

I assume this is can be treated as critical..

lukasa1993 · 2021-06-12T07:05:39Z

how this is not fixed asap ?

tanmaster · 2021-06-12T11:42:58Z

Same issue...

miha42-github · 2021-06-12T16:43:45Z

Exactly the same problem. This seems to be a problem that keeps on giving in some form or fashion without a consistent resolution.

luaneko · 2021-06-13T02:33:10Z

This issue can be reproduced with next.js as well.

info  - Checking validity of types...
info  - Creating an optimized production build...
info  - Using external babel configuration from /app/babel.config.js
Failed to compile.

./node_modules/@react-leaflet/core/esm/path.js
Module parse failed: Unexpected token (10:41)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   useEffect(function updatePathOptions() {
|     if (props.pathOptions !== optionsRef.current) {
>       const options = props.pathOptions ?? {};
|       element.instance.setStyle(options);
|       optionsRef.current = options;


> Build error occurred
Error: > Build failed because of webpack errors
    at /app/node_modules/next/dist/build/index.js:17:924
    at async Span.traceAsyncFn (/app/node_modules/next/dist/telemetry/trace/trace.js:6:584)
error Command failed with exit code 1.

Paul Cammy fucked up when he released react-leaflet@3.2.0. He broke all event handling related to task popup open/close so nothing works anymore. He also broke compilation: PaulLeCam/react-leaflet#891

pkdhital · 2021-06-13T05:07:06Z

Ok somewhere else in internet, I found following fix:

Go to package.json and find following segment
"browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }
And replace it with following

"browserslist": [ ">0.2%", "not dead", "not op_mini all" ]
3. Remove packahe-lock.json file
4. Remove node_modules folder
4. Run project again it should compile.

designbyadrian · 2021-06-13T05:08:50Z

This doesn't resolve the issue, and also isn't working for everybody.

Create React App, for example, expects a different structure. You'll discover this if you read the referenced issues.

Don't close this ticket!

MGraefe · 2021-06-13T08:07:03Z

Changing the browser target is a stupid workaround but not a fix. It's also not necessary for any of the other probably thousands of packages in a typical project.

ilindaniel · 2021-06-13T14:50:38Z

This has already been addressed here:
#881 (comment)
#877 (comment)

A quick fix is to downgrade Leaflet. In your package.json file, change these lines:

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

Then remove the node_modules folder and run npm install.

Optional: npm install --save @monsonjeremy/react-leaflet
See: #885 (comment)
Use at your own risk though, as the author will not be further maintaining this package. It is only to hold over until his PR gets merged.

vyemialyanchyk · 2021-06-14T23:29:42Z

new "progressive" style '??' should be replaced with old style '?:' in 5 places which I posted above for quickfix.

dennisat · 2021-06-17T06:57:00Z

Com' on, it's only one line hope so , why nobody fixing this?

mattstrain · 2021-06-17T19:43:07Z

Same issue trying to import vis-data.

Module parse failed: Unexpected token (1437:21)
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.
|       if (id != null) {
|         // a single item
>         return item ?? null;
|       } else {
|         // just return our array

daniofilho · 2021-06-21T13:42:28Z

I fixed this upgrading to webpack 5, if it helps somebody.

HonzaVrkota · 2021-06-22T12:56:05Z

I've been trying to run it on Next.js, but it didn't work.
Then I've had upgrade my Next.js on v11, which is support Webpack 5 it starts work properly.

adeelibr · 2021-06-29T11:50:06Z

any update on this issue? using create-react-app. I am happy to make a PR if I can get some guidance 😅

dennisat · 2021-06-29T12:51:53Z

No clean solution so far

But this workaround works for me without eject!

Use the react-app-rewired, read the doc how to add it
Create a config-overrides.js at root with this content

const {
  override,
  addExternalBabelPlugins,
} = require("customize-cra");

module.exports = {
  webpack: override(
    ...addExternalBabelPlugins(
      "@babel/plugin-proposal-nullish-coalescing-operator"
    ),
  ),
};

mscandan · 2021-07-03T13:46:27Z

this answer worked for me

oasis1992 · 2021-07-05T02:04:58Z

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

this solution is the fastest

…leaflet#891

designbyadrian · 2021-07-28T07:44:16Z

@DVGY

Please use the +1 icon (👍) at the top of the issue instead of writing "me too". Repo owners can find popular tickets that way. Comments are made for discussing the issue.

alteyss · 2021-09-02T15:40:49Z

Hi 🙂

In my case I had to use a webpack rule with the following packages as quoted above :

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

config.module.rules.push(
    {
        test: /\.m?js$/,
        include: [/node_modules\/react-leaflet/],
        use: {
            loader: 'babel-loader',
            options: {
                plugins: [
                    '@babel/plugin-proposal-optional-chaining',
                    '@babel/plugin-proposal-nullish-coalescing-operator'
                ]
            }
        }
    }
);

As you can see, I only include react-leaflet that was causing trouble.

Context : PWA Studio (based on React).

jayarjo · 2021-09-04T17:11:10Z

Fix this please. It's ridiculous.

limal · 2021-09-21T20:37:04Z

For Next.js 11 do two following things to make the latest version (react-leaflet@3.2.1) work for you:

In next.config.js specifically target the @react-leaflet/core inside the node_modules like below. Otherwise it won't transpile the offending module.

 const withTM = require("next-transpile-modules")([
  "react-leaflet/node_modules/@react-leaflet/core", // specifying just the "react-leaflet" won't work
]);

To resolve the window is not defined compile error, import your Map component dynamically with the SSR turned off:

const DynamicMap = dynamic(() => import("../../src/components/map/Map"), { ssr: false });

const MapPage = () => {
  return (
    <DynamicMap />
  );
};

danieltkach · 2021-09-21T20:51:40Z

https://stackoverflow.com/questions/68016021/module-parse-failed-additional-babel-loader/68017963#68017963

In order to run it, the react-leaflet library must be downgraded. These are the steps:

remove react-leaflet: npm uninstall react-leaflet
update your react-scripts version to 3.3.0 or higher: npm install --save react-scripts@latest
remove node_module directory (optional)
clean cache: npm cache clean --force
Install the working versions: npm i react-leaflet@3.1.0 @react-leaflet/core@1.0.2

You can now run the client doing npm start.

justrealmilk · 2021-09-22T08:53:18Z

I find it shocking that telling it to target old browsers fixes this.

The issue started occuring for me when I changed

  "browserslist": {
    "production": [
      "last 2 Chrome versions",
      "last 2 Firefox versions",
      "last 2 Safari versions",
      "iOS >= 13",
      "unreleased versions"
    ],
    "development": [
      "last 2 Chrome versions",
      "last 2 Firefox versions",
      "last 10 Safari versions",
      "iOS >= 13",
      "unreleased versions"
    ]
  }

to

  "browserslist": {
    "production": [
      "last 2 Chrome versions",
      "last 2 Firefox versions",
      "last 2 Safari versions",
      "iOS >= 14",
      "unreleased versions"
    ],
    "development": [
      "last 2 Chrome versions",
      "last 2 Firefox versions",
      "last 2 Safari versions",
      "iOS >= 14",
      "unreleased versions"
    ]
  }

morganney · 2021-10-10T13:27:59Z

This lib needs a new maintainer that understands the issue.

ztolley · 2021-11-05T20:46:48Z

Why close an issue that hasn’t been fixed?

Hit this error while working. Only known fix at present is to downgrade react-leaflet and @react-leaflet/core. PaulLeCam/react-leaflet#891

firflant · 2022-01-20T12:40:30Z

This issue is still blocking may people from using the package. It should not be closed indeed.

wh1337 · 2022-05-24T18:32:54Z

Still having this issue.

dennisat · 2022-05-25T08:05:16Z

Come on... please, respect the open-source reputation.

DVGY · 2022-05-25T08:16:58Z

Guys i fixed this issue by forking repo and changing babel.js config. I really think, this fix should exist in react leaftlet as it blocks the usage

dennisat · 2022-05-25T08:34:09Z

It is not always easy to change the babel, and it is super ugly in 2022 to add something in babel for just a dependency.

DVGY · 2022-05-25T08:41:11Z

dependenc
@dennisat
#966
DVGY@205437b
This is what I changed to make it work. Again, the user of library should not add this, the maintainer should add this, so that it does not have any problem

falcondpr · 2023-11-24T19:22:20Z

I faced the same issue and was able to resolve it by importing the files separately

import { MapContainer } from 'react-leaflet/MapContainer'
import { TileLayer } from 'react-leaflet/TileLayer'
import { useMap } from 'react-leaflet/hooks'

MiladJoodi · 2024-03-28T13:13:08Z

same issue now 🥺

McTom234 · 2024-04-28T15:45:54Z

Same issue (4.2.1)

I was able to fix it by using the exact imports. (import {...} from 'react-leaflet/...')

tayouthae · 2024-08-15T04:25:54Z

Add “use client” to the top of your file.

"use client"
// my code here

NextJS assumes a component is a Server Component unless you explicitly tell NextJS the component you want is a Client Component.

xuzhengrong · 2024-08-21T02:18:43Z

I also encountered this problem and solved it in a clumsy way! Since umijs is used as the development framework, configuring babel plugins is extremely inconvenient, so I gave up. Finally, I found the source code of react-leaflet from the node_modules directory. I copied the js files under the two directories of /lib and /node_modules/@react-leaflet/core/lib into my own code project. Files with the suffix.d.ts don't need to be copied. Then, I modified the copied code, corrected the import path. Finally, I deleted the react-leaflet configuration in package.json and ran npm uninstall. Then it was all right.

blythechan · 2024-12-11T16:18:41Z

react-leaflet: "3.2.5", 
@react-leaflet: "1.1.1", 
webpack: "4.47.0"

Out of all the alleged solutions, this answer worked for me. To expand on the answer, I tweaked mine a bit to something akin to this:

{
     test: /\(js|jsx)$/,
     include: [ path.resolve(__dirname, "src"), path.resolve(__dirname, "node_modules/react-leaflet") ],
     use: {
          loader: 'babel-loader',
          presets: [
               "@babel/preset-env",
               "@babel/preset-react"
          ],
          plugins: [
               "@babel/plugin-proposal-nullish-operator", // version 7.24.6; ??
               "@babel/plugin-proposal-optional-chaining" // .?
         ]
     }
}

pkdhital closed this as completed Jun 13, 2021

pkdhital reopened this Jun 13, 2021

miccoh1994 mentioned this issue Jul 6, 2021

fix: #891, #883, #882, #881, and issue when building component libraries for react-leaflet (#897) #896

Closed

Geit added a commit to Geit/swg-map-viewer that referenced this issue Jul 11, 2021

Switch to temporary alternative react-leaflet due to PaulLeCam/react-…

c38b5cf

…leaflet#891

agnoam mentioned this issue Sep 29, 2021

Can't resolve '@react-leaflet/core' error alex3165/react-leaflet-draw#100

Open

PaulLeCam closed this as completed Oct 9, 2021

sergei-maertens mentioned this issue Nov 4, 2021

Map component fixes open-formulieren/open-forms-sdk#100

Merged

rod-glover mentioned this issue Jun 18, 2024

Loosen peer deps pacificclimate/pcic-react-leaflet-components#24

Open

Can't compile react-leaflet #891

Can't compile react-leaflet #891

Comments

pkdhital commented Jun 6, 2021 • edited Loading

Bug report

Expected behavior

Steps to reproduce

Edit

MGraefe commented Jun 7, 2021 • edited Loading

vyemialyanchyk commented Jun 11, 2021 • edited Loading

vyemialyanchyk commented Jun 11, 2021

vyemialyanchyk commented Jun 11, 2021

vyemialyanchyk commented Jun 11, 2021

vyemialyanchyk commented Jun 11, 2021

vyemialyanchyk commented Jun 11, 2021

lukasa1993 commented Jun 12, 2021

tanmaster commented Jun 12, 2021

miha42-github commented Jun 12, 2021

luaneko commented Jun 13, 2021

pkdhital commented Jun 13, 2021 • edited Loading

designbyadrian commented Jun 13, 2021 • edited Loading

MGraefe commented Jun 13, 2021 • edited Loading

ilindaniel commented Jun 13, 2021 • edited Loading

vyemialyanchyk commented Jun 14, 2021 • edited Loading

dennisat commented Jun 17, 2021

mattstrain commented Jun 17, 2021

daniofilho commented Jun 21, 2021

HonzaVrkota commented Jun 22, 2021

adeelibr commented Jun 29, 2021 • edited Loading

dennisat commented Jun 29, 2021

No clean solution so far

mscandan commented Jul 3, 2021

oasis1992 commented Jul 5, 2021

designbyadrian commented Jul 28, 2021

alteyss commented Sep 2, 2021

jayarjo commented Sep 4, 2021

limal commented Sep 21, 2021 • edited Loading

danieltkach commented Sep 21, 2021 • edited Loading

justrealmilk commented Sep 22, 2021

morganney commented Oct 10, 2021

ztolley commented Nov 5, 2021

firflant commented Jan 20, 2022

wh1337 commented May 24, 2022

dennisat commented May 25, 2022

Come on... please, respect the open-source reputation.

DVGY commented May 25, 2022

dennisat commented May 25, 2022

DVGY commented May 25, 2022 • edited Loading

falcondpr commented Nov 24, 2023

MiladJoodi commented Mar 28, 2024

McTom234 commented Apr 28, 2024 • edited Loading

tayouthae commented Aug 15, 2024

xuzhengrong commented Aug 21, 2024

blythechan commented Dec 11, 2024

pkdhital commented Jun 6, 2021 •

edited

Loading

MGraefe commented Jun 7, 2021 •

edited

Loading

vyemialyanchyk commented Jun 11, 2021 •

edited

Loading

pkdhital commented Jun 13, 2021 •

edited

Loading

designbyadrian commented Jun 13, 2021 •

edited

Loading

MGraefe commented Jun 13, 2021 •

edited

Loading

ilindaniel commented Jun 13, 2021 •

edited

Loading

vyemialyanchyk commented Jun 14, 2021 •

edited

Loading

adeelibr commented Jun 29, 2021 •

edited

Loading

limal commented Sep 21, 2021 •

edited

Loading

danieltkach commented Sep 21, 2021 •

edited

Loading

DVGY commented May 25, 2022 •

edited

Loading

McTom234 commented Apr 28, 2024 •

edited

Loading