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

Question

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

score 2 · Answer 1 · edited Mar 04 '22 at 16:07

2

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"

edited Mar 04 '22 at 16:07

Dharman

30,962
25
85
135

answered Mar 04 '22 at 16:01

Shawn

21
1

score 0 · Answer 2 · answered Mar 03 '22 at 22:34

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

Hey, could u tell how to achieve this? i already have existing react app, should i use npm eject or use expo package ? — Muditx, Apr 17 '22 at 12:22

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

2 Answers2