Comment corriger l'erreur "Échec de la compilation: ./node_modules/@react-leaflet/core/esm/path.js 10:41 L'analyse du module a échoué: jeton inattendu (10:41)"

J'ai fait face au même problème avec la dernière version de la brochure: "^ 3.2.0", mais j'ai surmonté ce problème en déclarant vers la version 2.7.0. Ici ce que vous devez faire:

• Supprimez les Node_Modules
• Supprimez le 'package-lock.json'
• Changez les versions de dépliants et react-leaflet dans le "package.json" en: "react-leaflet": "^ 2.7.0" et "feuillette": "^ 1.6.0",
• Exécutez "NPM Install"
• Le composant MapContainer n'est pas défini dans la version 2.7.0, vous devez donc utiliser la carte à la place.
• Ajoutez un peu de style (longueur) aux composants pour voir la carte.

Détrra de "React-Leaflet": "2.7.0".

Le problème semble finalement être lié à Create-React-App et la façon dont il regroupe les fichiers et semble être résolu si vous remplacez les cibles du navigateur de:

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

à

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

Ensuite, arrêtez le serveur et réacheminez-le.

Les crédits allez à bkiac Issue de github officiel de création-réact

edit

vous pouvez reproduire l'erreur et le correctif si vous téléchargez Cette boîte de codes et boîte . Lorsque vous l'ouvrez, cela fonctionne, mais si vous le téléchargez et l'exécutez localement, vous pouvez voir l'erreur en utilisant les options First BrowsersList dans package.json . Si vous arrêtez le serveur, remplacez BrowsersList par la nouvelle et réinterrisez l'application, vous pouvez voir qu'elle fonctionne comme prévu.

Ajouter

 {
  "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"
  ]
}

J'ai trouvé un moyen de le corriger.

étapes à corriger: -

ouvrez votre fichier package.json et modifiez votre liste de navigateurs comme suit.

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

• https://github.com/facebook/create- React-App / Issues / 9468 # émetteur-694191642
• https://github.com/paullecam/rect-leaflet/issues/877

J'ai rencontré ce problème après avoir fait une mise à jour NPM.

Ces packages ont été installés: "react-ling": "^ 3.2.0"

et comme dépendance (trouvé dans .lock): "@ react-leaflet / core": "1.1.0",

Forcer le NPM à utiliser ces versions, l'a corrigé pour moi:

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

"react-lichlet": "3.1.0",

Essayez donc npm i react-lisflet@3.1.0 @ react-leaflet / core @ 1.0.2

J'ai eu le même problème, mais toutes les solutions prévues ici ne m'ont pas convaincu. Je l'ai donc résolu de la manière suivante:

// 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
   
}

Ensuite, je l'ai ajouté aux plugins Babel dans babel.config.js

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

J'ai résolu le problème en modifiant le BrowsersList comme d'autres l'ont indiqué. My BrowsersList ressemble maintenant à ceci:

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

J'ai ensuite fait ce qui suit:

1. Supprimer votre dossier node_modules
2. Exécuter NPM Cache Clean - Force
3. Exécuter NPM Install

Maintenant, tout devrait fonctionner comme prévu. Si la carte n'est pas chargée, n'oubliez pas d'ajouter le dépliant CSS et JS à votre page et définissez la hauteur de votre contenant de la carte. Voir le documentation officielle Pour plus d'informations.

J'ai fait face au même problème en utilisant la version 3.2.0 de React-Leaflet. La solution ci-dessus a fonctionné mais je souhaite ajouter quelques détails à des fins de clarification:

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

notez que le code package ci-dessus doit être exact, ce qui signifie là ne sont pas {} dans le code ci-dessus après avoir supprimé:

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

de:

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

Cela ne s'applique pas directement à la question d'origine (les instructions sont destinées aux projets créés par création-application), mais j'écris toujours la réponse au cas où un utilisateur de l'ARC en plus de moi-même trébuche sur cette question.

• Je ne voulais pas forcer l'utilisation d'une ancienne version React-Leaflet
• Les modifications de la liste du navigateur suggérées dans quelques réponses n'ont pas fonctionné car j'utilise Create-React-App ( yarn start qui vient de me rafraîchir la configuration)
• @ La suggestion de Wito n'a pas fonctionné directement, pour la même raison (en raison de l'utilisation de Create-React-App, il n'y a pas de contrôle direct des fichiers de configuration WebPack / Babel)
• L'éjection de l'ARC aurait été une option, mais j'ai préféré ne pas suivre cette raison pour cette seule raison.

Ce qui a finalement fonctionné, c'était l'utilisation des deux bibliothèques react-app-wewired et react-app-wrewire-babel-loadher . Étapes nécessaires:

1. Yarn Add -d React-App-App-React-App-Vrewire-Babel-chargedeur
2. Modifier les noms de script dans package.json Selon les instructions de React-App-Rewired:

/* 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;
};

3. Créer Config-overrides.js dans la racine du projet en fonction des instructions de React-App-Vrewire-Babel-chargedeur:

  /* 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"
}

Et puis cela fonctionne. Fondamentalement, cela inclut React-Leaflet dans la transpilation de Babel de la même manière que la réponse de Wito fait pour les constructions non CRA.

Le piratage de votre BrowsersList ou Downrading Packages n'est pas une solution sécurisée ou à long terme pour traiter les modules qui Ne ciblez pas une version raisonnable de js . @ La réponse de Jlahd est excellente, sauf que react-app-wewire-babel-loader est n'est plus pris en charge par son auteur. Vous pouvez atteindre le même résultat encore plus facilement avec Personnalise-cra ( que vous devriez utiliser avec l'ARC de toute façon, car c'est le seul moyen de configurer votre Politique de sécurité du contenu ) En utilisant babelinclude :

// 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
  ),
};

Pour ceux qui exécutent NextJS.

Vous pouvez résoudre ce fichier WebPack 5 en activation dans le fichier Next.config.js.

const nextConfig = {
  future: {
    webpack5: true,
  },
};

module.exports = nextConfig;

Merci à ce commentaire de Marcin-Piechaczek: https://github.com/paullecam/reactleaflet/issues/ 883 # émetteur-849126348

J'ai obtenu cette erreur après la mise à niveau de React-Leaflet vers la version 3.2.0 pour corriger une erreur tout en supprimant les marqueurs avec des Info-bulles permanentes de la carte.

p>

Ajouter "@ Types / Leaflet": "1.7.0" dans les dépendances de package.json.

Dans son code source, React-Leaflet utilise l'opérateur de coalescination nuls qui n'est pas pris en charge par une version spécifique d'Acorn.

Pour plus de détails, consultez l'explication de Nnatter ici:

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

Pour résoudre le problème, vous pouvez:

1- Utilisez la solution suggérée de NNATA:

https://babeljs.io/docs/en / Babel-Plugin-Proposal-Nullish-Coalescing-Operator

ou

2 - Au lieu d'utiliser le package React-Leaflet officiel que vous pouvez utiliser

Installation de NPM - Save @ Monsonjemy / React-Leaflet

de

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

qui est une fourche de RL 3.2.1.

De cette façon, vous n'avez pas à rétrograder ni ne pas faire de trucs drôles.

Après avoir installé React-Leaflet, le package existant. JSON sera comme ceci:

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

Mais en exécutant cela, il montrera une erreur comme ceci:

xxx

1. Pour corriger le bogue, modifiez le fichier package.json ci-dessus vers (en tant que Array):

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

2. Après cela, allez dans les modules de nœud, supprimez le dossier .cache
3. Arrêtez le serveur en utilisant ctrl c
4. faire installer NPM encore

pour ceux qui utilisent NextJS

Créez une carte dans un composant et importez avec ssr: false;

Exemple: p >

Composant: map.js

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

Importez la carte dans une page ou où vous en avez besoin comme ceci:

Where.js p>

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>
  );
};

Alors vous pouvez l'utiliser ...

De plus, vous pouvez ajouter un composant de chargement si nécessaire.

pour plus de détails de Importation dynamique Vérifiez le lien en cliquant sur ici

Vous devez mettre à jour les réactifs pour résoudre ce problème dans package.json:

"react-scripts": "^5.0.0",

Installez ces moduaux dans pack Supprimer @ react-lisflet Forler dans les modules de nœuds Dans votre système avec CMD dans n'importe quel dossier

git clone https: / /github.com/hqdung99/maps-leaflet-youtube.git

Lorsque finirez, faites le dossier, ce nœud-modules et copiez ce dossier @ react-leaflet et passé dans les modules de nœuds précédents dossier