[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

[andrewm898]

Hey, did you end up figuring out the parseInBatches is not a function / multiple versions of react-palm issue? I am running into the same thing.

[AlfredoRuizXcaliburmp]

Very good, in the end we left it stopped. So I couldn't solve the problem.

[igorDykhta]

@AlfredoRuizXcaliburmp here is a minimal app based on the 3.1 version of kepler.gl and getting-started docs bundled with esbuild, with both MapLibre and Mapbox enabled.

kepler-app-3.1.zip

[AlfredoRuizXcaliburmp]

@igorDykhta thanks a lot

[andrewm898]

Is the expected size of the bundle.js files that come from this build 25MB - 48MB ? These files that are being generated are too large to deploy it, is this expected behavior? @igorDykhta

[igorDykhta]

@andrewm898 Most likely, this isn't expected. I see that the UMD bundle is 12MB. You can open an issue and provide details on how you got these numbers. I'll also investigate later using a bundle analyzer.

[andrewm898]

This is using the exact code you attached in that .zip file here, same esbuild, yarn.lock etc. I have tried it with and without npm bootstrap first, and with adding --minify, getting 25MB for bundle.js and 43.96 for bundle.js.map