[Bug] Module not found: Error: Can't resolve '@kepler.gl/components'

[AlfredoRuizXcaliburmp]

Describe the bug
Hi there

I'm trying to add kepler.gl to my react project but I can't get it to recognize the module. I've checked that it's in Packjson and Node_modules.

Screenshots

Desktop (please complete the following information):

• OS: Windows 11, Linux Ubuntu 22
• Browser Chrome, Firefox
• kepler.gl 3.0.0, 3.1.0-alpha.1,
• react 18,17,16,
• node 20, 18

[AlfredoRuizXcaliburmp]

Ok, I was using the alpha version of kepler.gl/components but it still doesn't load anything

[AlfredoRuizXcaliburmp]

"More than one copy of react-palm was loaded"

[AlfredoRuizXcaliburmp]

Now is
WARNING in ./node_modules/@formatjs/fast-memoize/lib/index.js
Module Warning (from ./node_modules/react-scripts/node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/workspace/javascript/kepler-demo/node_modules/@formatjs/fast-memoize/index.ts' file: Error: ENOENT: no such file or directory, open '/workspace/javascript/kepler-demo/node_modules/@formatjs/fast-memoize/index.ts'

[igorDykhta]

Hi @AlfredoRuizXcaliburmp
Could you try with the latest alpha? 3.1.0-alpha.3

[AlfredoRuizXcaliburmp]

Hi @igorDykhta

It now detects the alpha version of both components and redicers. I still can't get it to show me the base map with either Mapbox or Maplibre and I still get the error that it can't locate the file: /node_modules/@formatjs/fast-memoize/index.ts

Thank you very much and happy holidays

[AlfredoRuizXcaliburmp]

More than one copy of react-palm was loaded. This may cause problems.

[igorDykhta]

Hi @AlfredoRuizXcaliburmp
Just checked the latest alpha and I see the map, and don't see the missing @formatjs error message.

basic-app-with-latest-alpha.zip

[AlfredoRuizXcaliburmp]

Hi @igorDykhta

Thank you very much for your help.

The error occurs when I run a react.js project locally without build.

[AlfredoRuizXcaliburmp]

[AlfredoRuizXcaliburmp]

I have found that if I do not use esbuild when loading a dataset I get the following error

I understand that it is essential to use esbuild?

Thank you very much, happy holidays and a prosperous new year.

[igorDykhta]

No, esbuild shouldn't be mandatory.
You can attach your minimal project / config here so I can take a look.

[AlfredoRuizXcaliburmp]

my-app.zip

I'm playing a little crazy

[AlfredoRuizXcaliburmp]

Hi, I just noticed that despite passing the MapBox token, it is loading MapLibre and in the demo I see that it is the same.

[ibgreen]

I believe there is a new config API where your app can configure which basemap to use. I.e. mapbox and maplibre are not both included so that they can be switched dynamically, you need to build your app with one or the other, and maplibre is the default.

[AlfredoRuizXcaliburmp]

Hi there
I'm using the same configuration as in the demo app.
If it has been changed, could you tell me where I can see the documentation or an example?
Thank you very much and happy new year

[igorDykhta]

@AlfredoRuizXcaliburmp I don't think there is an example for custom basemap libraries.

You can pass custom configuration to your app like this:
Custom config

To use mapbox you need to pass:

getMapLib: () => import('mapbox-gl'),
mapLibCssClass: 'mapboxgl',
mapLibName: 'Mapbox',
mapLibUrl: 'https://www.mapbox.com/'

I'm trying to restore support for MapLibre and Mapbox in this PR:
#2897

[igorDykhta]

@AlfredoRuizXcaliburmp In the latest alpha release we added back Mapbox styles to the basemap style dropdown. Let me know how it works for you.

[AlfredoRuizXcaliburmp]

I'm trying it now, but mostly when I tried to pass the mapboxApiAcessToken prompt to maplibre it informed me that the token was not correct or that it was required.

I'm following the documentation but it keeps loading mapLibre