I am getting an Module parser error while using react-map-gl library

user_14761468 0
Viewed 1199
    ./node_modules/react-map-gl/dist/esm/components/use-control.js 12:46    
Module parse failed: Unexpected token (12: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.
|
|     if (!map.hasControl(ctrl)) {
>       map.addControl(ctrl, (opts || onRemove)?.position);
|     }
|

I am trying to use Mapbox for Map integration but I am getting above error while running the code, is anybody aware of this issue please help me

mapbox-gl mapbox-gl-js mapbox
2 Answers

I ran into this same exact problem. What did it for me was upgrading react-scripts from ^4.0.3 to ^5.0.0

"react-scripts": "^5.0.0"

user_183751800

You need to transpile react-map-gl lib.

Same approach, https://moti.fyi/web This solution can be used for @gorhom/bottom-sheet also.

Try this.

webpack.config.js

const createExpoWebpackConfigAsync = require("@expo/webpack-config");

module.exports = async function (env, argv) {

  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {
        dangerouslyAddModulePathsToTranspile: ["react-map-gl",], // this line!
      },
    },
    argv
    );

  // Customize the config before returning it.
  return config;
};

Same question. React Module Parse Failed – react-map-gl

user_162958350
Related