Para aquellos que usan nextjs

Cree un mapa en un componente e impórtelo con ssr:false;

Ejemplo:

Componente: Mapa.js

 const OpenMap = () => { return ( <div className="container"> <MapContainer MapContainer style={{ height: '300px' }} center={[60.198334, 24.934541]} zoom={10}> <TileLayer attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> </MapContainer> </div> ); };

Importa el mapa a una página o donde lo necesites así:

En algún lugar.js

 import dynamic from 'next/dynamic'; // for dynamic importing const OpenMap = dynamic(() => import('@/features/client/location/components/OpenMap'), { ssr: false, });

Entonces puedes usarlo...

Además, puede agregar un componente de carga si es necesario.

Para obtener más detalles sobre la importación dinámica, consulte el enlace haciendo clic aquí

Después de instalar react-leaflet, el paquete existente.json será así:

 "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] },

Pero al ejecutar esto, mostrará un error como este:

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

1. Para corregir el error, cambie el archivo package.json anterior a (como una matriz):

 "browserslist": [ ">0.2%", "not dead", "not op_mini all" ],

2. Después de eso, vaya a los módulos de nodo y elimine la carpeta .cache
3. Detener el servidor usando ctrl C
4. Vuelva a instalar npm

En su código fuente, React-Leaflet utiliza el operador coalescente nulo, que no es compatible con una versión específica de Acorn.

Para más detalles, consulte la explicación de nnatter aquí:

https://github.com/PaulLeCam/react-leaflet/issues/883

Para solucionar el problema, puede:

1- use la solución sugerida por nnater:

https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator

o

2 - en lugar de usar el paquete oficial React-Leaflet, puede usar

npm install --save @monsonjeremy/react-leaflet

Desde

https://www.npmjs.com/package/@monsonjeremy/react-leaflet

que es una bifurcación de RL 3.2.1.

De esa manera no tienes que bajar de categoría ni hacer cosas graciosas.

Encontré este problema después de hacer una actualización de npm.

Se instalaron estos paquetes: "react-leaflet": "^3.2.0"

y como dependencia (que se encuentra en .lock): "@react-leaflet/core": "1.1.0",

Obligando a npm a usar estas versiones, lo arreglé para mí:

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

"react-leaflet": "3.1.0",

Así que prueba npm i react-leaflet@3.1.0 @react-leaflet/core@1.0.2

Tuve el mismo problema, pero todas las soluciones aquí planteadas no me convencieron. Así que lo resolví de la siguiente manera:

 yarn add -D @babel/plugin-proposal-nullish-coalescing-operator

luego lo agregué a los complementos de babel en babel.config.js

 module.exports = { presets: [ // ... some presets here ], plugins: [ // ... any plugins here '@babel/plugin-proposal-nullish-coalescing-operator', ], env: { // ... your config }, }

como surge el problema porque la biblioteca está usando el operador nulo (??), debería agregarlo a la lista de exclusiones del bable-loader en webpack.

 // webpack.common.js module.exports = { // ... some config here module: { rules: [ { test: /\.(js|jsx)$/, // the @react-leaflet and react-leaflet libraries must be excluded. exclude: /node_modules\/(?!(@react-leaflet|react-leaflet)\/)/i, use: [] } ], // ... more config here }

Solucioné el problema cambiando la lista de browserslist como han dicho otros. Mi lista de browserslist ahora se ve así:

 "browserslist": [ ">0.2%", "not dead", "not op_mini all" ]

Luego hice lo siguiente:

1. Elimina tu carpeta node_modules
2. Ejecute npm cache clean --force
3. Ejecute npm install

Ahora todo debería funcionar como se esperaba. Si el mapa no está cargado, no olvide agregar el folleto css y js a su página y establecer la altura para su contenedor de mapa. Consulte la documentación oficial para obtener más información.

Enfrenté el mismo problema al usar la versión 3.2.0 de react-leaflet. La solución anterior funcionó, pero quiero agregar un par de detalles para aclarar:

 "browserslist": [ ">0.2%", "not dead", "not op_mini all" ],

TENGA EN CUENTA QUE el código anterior de package.json debe ser exacto, lo que significa que no hay { } en el código anterior después de haberlo eliminado:

 "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ]

desde:

 "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ]},

Por separado, en su terminal, escriba cd seguido de ls para ver si hay algún paquete.json y node_modules por ahí. Si están allí, rm -rf filename para eliminarlos (ya que es posible que los haya agregado por error con el tiempo cuando olvidó navegar a su proyecto y npm i or yarn por error).

Finalmente, instale react-leaflet nuevamente y debería funcionar. (Nota: vea si su paquete.json se ha actualizado a 3.2.0 (o la última versión) después de haber reinstalado la última versión, si no, simplemente cambie el folleto de reacción en su paquete.json a la última versión instalada a mano.)

Esto no se aplica directamente a la pregunta original (las instrucciones son para proyectos originados en crear-reaccionar-aplicaciones), pero todavía estoy escribiendo la respuesta en caso de que algún usuario de CRA, además de mí, se tropiece con esta pregunta.

• No quería forzar el uso de una versión anterior del folleto de reacción.
• Los cambios en la lista del navegador sugeridos en un par de respuestas no funcionaron ya que estoy usando create-react-app (el yarn start solo forzó una actualización de la configuración)
• La sugerencia de @WITO no funcionó directamente, por la misma razón (debido al uso de create-react-app no hay control directo de los archivos de configuración de webpack/babel)
• Expulsarme de CRA hubiera sido una opción, pero preferí no ir por ese camino solo por este motivo.

Lo que finalmente funcionó fue usar las dos bibliotecas react-app-rewired y react-app-rewire-babel-loader . Pasos necesarios:

1. yarn add -D react-app-rewired react-app-rewire-babel-loader
2. Cambie los nombres de los scripts en package.json de acuerdo con las instrucciones de react-app-rewired:

 /* package.json */ "scripts": { - "start": "react-scripts start", + "start": "react-app-rewired start", - "build": "react-scripts build", + "build": "react-app-rewired build", - "test": "react-scripts test", + "test": "react-app-rewired test", "eject": "react-scripts eject" }

3. Cree config-overrides.js en la raíz del proyecto según las instrucciones de react-app-rewire-babel-loader:

 /* config-overrides.js */ const path = require("path"); const fs = require("fs"); const rewireBabelLoader = require("react-app-rewire-babel-loader"); const appDirectory = fs.realpathSync(process.cwd()); const resolveApp = relativePath => path.resolve(appDirectory, relativePath); module.exports = function override(config, env) { config = rewireBabelLoader.include( config, resolveApp("node_modules/@react-leaflet") ); config = rewireBabelLoader.include( config, resolveApp("node_modules/react-leaflet") ); return config; };

Y luego funciona. Básicamente, esto incluye el folleto de reacción en la transpilación de babel de la misma manera que la respuesta de @ WITO lo hace para las compilaciones que no son de CRA.

Hackear su lista de browserslist o degradar paquetes no es una solución segura ni a largo plazo para tratar con módulos que no apuntan a una versión razonable de JS . La respuesta de @ jlahd es excelente, excepto que su autor ya no admite react-app-rewire-babel-loader . Puede lograr el mismo resultado aún más fácilmente con customize-cra (que debería usar con CRA de todos modos, ya que esa es la única forma de configurar su Política de seguridad de contenido ) usandobabelInclude :

 // config-overrides.js const { babelInclude, override } = require('customize-cra'); const path = require('path'); module.exports = { webpack: override( babelInclude([ path.resolve('src'), path.resolve('node_modules/@react-leaflet'), path.resolve('node_modules/react-leaflet') ]) // and configure other stuff here like csp-html-webpack-plugin ), };

Enfrenté el mismo problema con la última versión del folleto: "^3.2.0", pero superé este problema cambiando a la versión 2.7.0. Aquí lo que debes hacer:

• Eliminar los node_modules
• Eliminar el 'paquete-lock.json'
• Cambie las versiones del prospecto y del prospecto de reacción en "package.json" a: "react-leaflet": "^2.7.0" y "leaflet": "^1.6.0",
• ejecutar "instalación npm"
• El componente MapContainer no está definido en la versión 2.7.0, por lo que debe usar Map en su lugar.
• Agregue algo de estilo (longitud) a los componentes para ver el mapa.

Degradar a "react-leaflet": "2.7.0".

El problema finalmente parece estar relacionado con create-react-app y la forma en que agrupa los archivos y parece resolverse si reemplaza los objetivos del navegador de:

 "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] },

para

 "browserslist": [ ">0.2%", "not dead", "not op_mini all" ],

Luego detenga el servidor y vuelva a ejecutarlo.

Los créditos van al problema oficial de github de create-react-app de bkiac

Editar

Puede reproducir el error y la solución si descarga este codesandbox . Cuando lo abre, funciona, pero si lo descarga y lo ejecuta localmente, puede ver el error usando las primeras opciones de la lista de browserslist en package.json . Si detiene el servidor, reemplaza las opciones de la lista de browserslist con las nuevas y vuelve a ejecutar la aplicación, puede ver que funciona como se esperaba.

agregar

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

en "paquete.json"

github

La segunda solución:

Si aún tiene problemas, puede ser del archivo package.json . Verifique que sea similar al siguiente archivo:

 { "name": "my-app", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.12.0", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "antd": "^4.15.6", "leaflet": "1.7.1", "leaflet.marker.slideto": "^0.2.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-leaflet": "3.0.2", "react-leaflet-drift-marker": "^3.0.0", "react-scripts": "4.0.3", "web-vitals": "^1.1.2" }, "devDependencies": { "typescript": "3.8.3" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ] }

Encontré una manera de arreglarlo.

Pasos para arreglar: -

Abra su archivo package.json y edite su lista de navegadores de la siguiente manera.

 "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] },

para

 "browserslist": [ ">0.2%", "not dead", "not op_mini all" ],

Una vez que haya hecho esto, elimine el directorio node_modules/.cache .

Luego intente npm install

y npm start

Tadaaa!

Referencias:-

• https://github.com/facebook/create-react-app/issues/9468#issuecomment-694191642
• https://github.com/PaulLeCam/react-leaflet/issues/877

Para aquellos que ejecutan nextjs.

Puede corregir esto al habilitar webpack 5 en el archivo next.config.js.

 const nextConfig = { future: { webpack5: true, }, }; module.exports = nextConfig;

Gracias a este comentario de marcin-piechaczek: https://github.com/PaulLeCam/react-leaflet/issues/883#issuecomment-849126348

Recibí este error después de actualizar el folleto de reacción a la versión 3.2.0 para corregir un error al eliminar los marcadores con información sobre herramientas permanente del mapa.

Agregue "@types/leaflet": "1.7.0" a las dependencias de package.json.

necesita actualizar los scripts de reacción para resolver este problema en package.json:

 "react-scripts": "^5.0.0",