2

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 => {

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!

Brandon
  • 21
  • 1
  • I've got exactly the same error. – Trevor Hewitt Feb 17 '22 at 00:26
  • So it's pointing to the optional chaining operator. The '?'. A webpack module or babel doesn't like it being there. I have babel-loader set to exclude node_modules, so that should not be an issue. What version of webpack are you using? I'm on 4. – Trevor Hewitt Feb 17 '22 at 04:53
  • @TrevorHewitt The issue is that that babel is not transpiling this module. The optional chainer is being interpreted at runtime. The goal here is to reference their es5 build not the esm without having to go through the process referenced by Tsuchida below – AdamSchuld Apr 08 '22 at 13:13

1 Answers1

0

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;
};
Tsuchida Wataru
  • 13
  • 3