Search code examples
reactjsleafletreact-leafletbabel-loaderreact-leaflet-v3

Module parse failed: additional babel_loader

I have been using react-leaflet for a while now, and after a few weeks I deleted the files inside the node_modules and reinstalled them, and I did not touch the react-leaflet version at all, but when I try to run the project, it gives me an 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;

Solution

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

    1. remove react-leaflet: npm uninstall react-leaflet

    2. update your react-scripts version to 3.3.0 or higher: npm install --save react-scripts@latest

    3. remove node_module directory (optional)

    4. clean cache: npm cache clean --force

    5. Install the working versions: npm i [email protected] @react-leaflet/[email protected]

    You can now run the client doing npm start.