React Module Parse Failed – react-map-gl

Question

I am currently trying to make a typescript app on expo using the react-map-gl package. I currently am trying to load the basic example code snippet they have. I have downloaded the type files for react-map-gl as well.

However, when I try to run the app this error shows:

Module parse failed: Unexpected token (10:46)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         const gc = new mapLib.GeolocateControl(props);
|         gc.on('geolocate', e => {
>             thisRef.current.props.onGeolocate?.(e);
|         });
|         gc.on('error', e => {
Copy

I haven't been able to find anything online that resolves this problem. Does anyone know what I'm doing wrong? Happy to provide more information as well. Thanks!

Answer 1

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