[Bug] issue with demo website on version 3

[aversag]

Describe the bug I'm getting error with webpack when launching the demo website on version 3.

To Reproduce Go to kepler.gl/examples/demo-app npm i npm start

Expected behavior npm server expected to start

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: mac os, linux
• Version 3.0.0

Additional context

✖ ｢wdm｣: Hash: 49855451ae88f8de9df9 Version: webpack 4.47.0 Time: 12785ms Built at: 03/27/2024 11:35:17 AM Asset Size Chunks Chunk Names bundle.js 32.1 MiB app [emitted] app bundle.js.map 30.7 MiB app [emitted] [dev] app Entrypoint app = bundle.js bundle.js.map [0] multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/main.js 52 bytes {app} [built] [./node_modules/global/document.js] 392 bytes {app} [built] [./node_modules/react-dom/client.js] 619 bytes {app} [built] [./node_modules/react-redux/es/index.js] 908 bytes {app} [built] [./node_modules/react-router-redux/lib/index.js] 1.92 KiB {app} [built] [./node_modules/react-router/es/index.js] 1.43 KiB {app} [built] [./node_modules/react/index.js] 190 bytes {app} [built] [./node_modules/strip-ansi/index.js] 161 bytes {app} [built] [./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {app} [built] [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.52 KiB {app} [built] [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {app} [built] [./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {app} [built] [./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {app} [built] [./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {app} [built] [./src/main.js] 946 bytes {app} [built] + 4713 hidden modules

ERROR in ./node_modules/@loaders.gl/gltf/node_modules/@math.gl/core/dist/index.js 13:9 Module parse failed: Unexpected token (13:9) 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 | export { Pose } from "./classes/pose.js"; | export { Euler } from "./classes/euler.js";

export * as _MathUtils from "./lib/math-utils.js"; | // lib | export { assert } from "./lib/assert.js"; @ ./node_modules/@loaders.gl/gltf/dist/lib/extensions/KHR_texture_transform.js 1:0-49 8:26-33 9:34-41 10:31-38 178:32-39 @ ./node_modules/@loaders.gl/gltf/dist/lib/api/gltf-extensions.js @ ./node_modules/@loaders.gl/gltf/dist/lib/parsers/parse-gltf.js @ ./node_modules/@loaders.gl/gltf/dist/gltf-loader.js @ ./node_modules/@loaders.gl/gltf/dist/index.js @ ./node_modules/@kepler.gl/layers/dist/scenegraph-layer/scenegraph-layer.js @ ./node_modules/@kepler.gl/layers/dist/index.js @ ./node_modules/@kepler.gl/reducers/dist/vis-state-updaters.js @ ./node_modules/@kepler.gl/reducers/dist/index.js @ ./src/store.js @ ./src/main.js

ERROR in ./node_modules/@loaders.gl/gis/node_modules/@math.gl/core/dist/index.js 13:9 Module parse failed: Unexpected token (13:9) 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 | export { Pose } from "./classes/pose.js"; | export { Euler } from "./classes/euler.js";

export * as _MathUtils from "./lib/math-utils.js"; | // lib | export { assert } from "./lib/assert.js"; @ ./node_modules/@loaders.gl/gis/node_modules/@math.gl/polygon/dist/polygon.js 2:0-40 7:28-35 @ ./node_modules/@loaders.gl/gis/node_modules/@math.gl/polygon/dist/index.js @ ./node_modules/@loaders.gl/gis/dist/lib/binary-features/geojson-to-flat-geojson.js @ ./node_modules/@loaders.gl/gis/dist/index.js @ ./node_modules/@kepler.gl/layers/dist/geojson-layer/geojson-utils.js @ ./node_modules/@kepler.gl/layers/dist/index.js @ ./node_modules/@kepler.gl/reducers/dist/vis-state-updaters.js @ ./node_modules/@kepler.gl/reducers/dist/index.js @ ./src/store.js @ ./src/main.js

ERROR in ./node_modules/@loaders.gl/gis/node_modules/@math.gl/polygon/dist/cut-by-mercator-bounds.js 52:86 Module parse failed: Unexpected token (52:86) 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 | wrapLongitudesForShortestPath(newPositions, size, targetStartIndex, targetIndex); | // Handle the case when the ring contains a pole

    insertPoleVertices(newPositions, size, targetStartIndex, targetIndex, options?.maxLatitude);

| srcStartIndex = srcEndIndex; | newHoleIndices[ringIndex] = targetIndex; @ ./node_modules/@loaders.gl/gis/node_modules/@math.gl/polygon/dist/index.js 6:0-102 6:0-102 6:0-102 @ ./node_modules/@loaders.gl/gis/dist/lib/binary-features/geojson-to-flat-geojson.js @ ./node_modules/@loaders.gl/gis/dist/index.js @ ./node_modules/@kepler.gl/layers/dist/geojson-layer/geojson-utils.js @ ./node_modules/@kepler.gl/layers/dist/index.js @ ./node_modules/@kepler.gl/reducers/dist/vis-state-updaters.js @ ./node_modules/@kepler.gl/reducers/dist/index.js @ ./src/store.js @ ./src/main.js

ERROR in ./node_modules/@loaders.gl/core/node_modules/@probe.gl/log/dist/utils/hi-res-timestamp.js 7:27 Module parse failed: Unexpected token (7:27) 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 | let timestamp; | if (isBrowser() && window.performance) {

    timestamp = window?.performance?.now?.();

| } | else if ('hrtime' in process) { @ ./node_modules/@loaders.gl/core/node_modules/@probe.gl/log/dist/index.js 12:0-64 12:0-64 @ ./node_modules/@loaders.gl/core/dist/lib/utils/log.js @ ./node_modules/@loaders.gl/core/dist/lib/api/select-loader.js @ ./node_modules/@loaders.gl/core/dist/index.js @ ./src/actions.js @ ./src/app.js @ ./src/main.js

ERROR in ./node_modules/@loaders.gl/core/node_modules/@probe.gl/env/dist/lib/is-electron.js 7:56 Module parse failed: Unexpected token (7:56) 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 | // Renderer process | // @ts-expect-error

if (typeof window !== 'undefined' && window.process?.type === 'renderer') {

| return true; | } @ ./node_modules/@loaders.gl/core/node_modules/@probe.gl/env/dist/index.js 8:0-50 8:0-50 @ ./node_modules/@loaders.gl/core/node_modules/@probe.gl/log/dist/log.js @ ./node_modules/@loaders.gl/core/node_modules/@probe.gl/log/dist/index.js @ ./node_modules/@loaders.gl/core/dist/lib/utils/log.js @ ./node_modules/@loaders.gl/core/dist/lib/api/select-loader.js @ ./node_modules/@loaders.gl/core/dist/index.js @ ./src/actions.js @ ./src/app.js @ ./src/main.js

ERROR in ./node_modules/@loaders.gl/core/node_modules/@probe.gl/env/dist/lib/is-browser.js 8:86 Module parse failed: Unexpected token (8:86) 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 isNode = | // @ts-expect-error

typeof process === 'object' && String(process) === '[object process]' && !process?.browser;

| return !isNode || isElectron(); | } @ ./node_modules/@loaders.gl/core/node_modules/@probe.gl/env/dist/index.js 6:0-48 6:0-48 @ ./node_modules/@loaders.gl/core/node_modules/@probe.gl/log/dist/log.js @ ./node_modules/@loaders.gl/core/node_modules/@probe.gl/log/dist/index.js @ ./node_modules/@loaders.gl/core/dist/lib/utils/log.js @ ./node_modules/@loaders.gl/core/dist/lib/api/select-loader.js @ ./node_modules/@loaders.gl/core/dist/index.js @ ./src/actions.js @ ./src/app.js @ ./src/main.js ℹ ｢wdm｣: Failed to compile.

[JosephToma1]

I have the same problem as well.

[ozietank]

I am also having this issue as well. Same error as above.

[donmccurdy]

The errors above can be resolved by upgrading the babel and webpack dependencies. Unfortunately that still leaves https://github.com/keplergl/kepler.gl/issues/2543, which appears to be a real conflict with incompatible versions of @loaders.gl/* dependencies, and prevents the demo app from building. Upgrading Kepler to Deckgl v9 might be a way to resolve that conflict.

[ibgreen]

FYI @igorDykhta who upgraded kepler to loaders.gl v4.

[ibgreen]

I believe that we did publish some deck.gl 8.10 alphas that also bump to loaders.gl 4

[donmccurdy]

Appears to be mostly on loaders.gl v4, with one remaining dependency to v3 in the demo app:

yarn why @loaders.gl/schema

yarn why v1.19.1
warning package.json: No license field
[1/4] 🤔  Why do we have the module "@loaders.gl/schema"...?
[2/4] 🚚  Initialising dependency graph...
warning No license field
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@loaders.gl/[email protected]"
info Has been hoisted to "@loaders.gl/schema"
info Reasons this module exists
   - Hoisted from "@loaders.gl#draco#@loaders.gl#schema"
   - Hoisted from "@loaders.gl#gltf#@loaders.gl#textures#@loaders.gl#schema"
   - Hoisted from "@kepler.gl#reducers#@kepler.gl#deckgl-layers#@deck.gl#geo-layers#@loaders.gl#schema"
   - Hoisted from "@kepler.gl#reducers#@kepler.gl#deckgl-layers#@deck.gl#layers#@loaders.gl#schema"
   - Hoisted from "@kepler.gl#reducers#@kepler.gl#deckgl-layers#@deck.gl#geo-layers#@loaders.gl#gis#@loaders.gl#schema"
   - Hoisted from "@kepler.gl#reducers#@kepler.gl#deckgl-layers#@deck.gl#geo-layers#@loaders.gl#mvt#@loaders.gl#schema"
   - Hoisted from "@kepler.gl#reducers#@kepler.gl#deckgl-layers#@deck.gl#geo-layers#@loaders.gl#terrain#@loaders.gl#schema"
   - Hoisted from "@kepler.gl#reducers#@kepler.gl#deckgl-layers#@deck.gl#geo-layers#@loaders.gl#wms#@loaders.gl#schema"
   - Hoisted from "@kepler.gl#reducers#@kepler.gl#deckgl-layers#@deck.gl#geo-layers#@loaders.gl#mvt#@loaders.gl#gis#@loaders.gl#schema"
   - Hoisted from "@kepler.gl#reducers#@kepler.gl#deckgl-layers#@deck.gl#geo-layers#@loaders.gl#wms#@loaders.gl#xml#@loaders.gl#schema"
info Disk size without dependencies: "1.27MB"
info Disk size with unique dependencies: "1.29MB"
info Disk size with transitive dependencies: "1.29MB"
info Number of shared dependencies: 1
=> Found "@loaders.gl/gis#@loaders.gl/[email protected]"
info This module exists because "@loaders.gl#gis" depends on it.
info Disk size without dependencies: "1.06MB"
info Disk size with unique dependencies: "1.08MB"
info Disk size with transitive dependencies: "1.08MB"
info Number of shared dependencies: 1
=> Found "@loaders.gl/arrow#@loaders.gl/[email protected]"
info This module exists because "@loaders.gl#arrow" depends on it.
info Disk size without dependencies: "1.06MB"
info Disk size with unique dependencies: "1.08MB"
info Disk size with transitive dependencies: "1.08MB"
info Number of shared dependencies: 1
=> Found "@loaders.gl/csv#@loaders.gl/[email protected]"
info This module exists because "@loaders.gl#csv" depends on it.
info Disk size without dependencies: "1.06MB"
info Disk size with unique dependencies: "1.08MB"
info Disk size with transitive dependencies: "1.08MB"
info Number of shared dependencies: 1
=> Found "@loaders.gl/json#@loaders.gl/[email protected]"
info This module exists because "@loaders.gl#json" depends on it.
info Disk size without dependencies: "1.06MB"
info Disk size with unique dependencies: "1.08MB"
info Disk size with transitive dependencies: "1.08MB"
info Number of shared dependencies: 1
=> Found "@loaders.gl/wkt#@loaders.gl/[email protected]"
info This module exists because "@loaders.gl#arrow#@loaders.gl#wkt" depends on it.
info Disk size without dependencies: "1.06MB"
info Disk size with unique dependencies: "1.08MB"
info Disk size with transitive dependencies: "1.08MB"
info Number of shared dependencies: 1
=> Found "@kepler.gl/layers#@loaders.gl/[email protected]"
info Reasons this module exists
   - "@kepler.gl#actions#@kepler.gl#layers" depends on it
   - Hoisted from "@kepler.gl#actions#@kepler.gl#layers#@loaders.gl#gltf#@loaders.gl#draco#@loaders.gl#schema"
   - Hoisted from "@kepler.gl#actions#@kepler.gl#layers#@loaders.gl#gltf#@loaders.gl#textures#@loaders.gl#schema"
info Disk size without dependencies: "1.06MB"
info Disk size with unique dependencies: "1.08MB"
info Disk size with transitive dependencies: "1.08MB"
info Number of shared dependencies: 1
✨  Done in 0.35s.

[alexandregodard]

... Quick and dirty awaiting fix...
Can be bypassed if you overload the version of @loaders.gl/schema and @loaders.gl/draco in package.json.

...
  "resolutions": {
    "@loaders.gl/schema": "4.1.0-alpha.4",
    "@loaders.gl/draco": "4.1.0-alpha.4"
  },
  "overrides": {
    "@loaders.gl/schema": "4.1.0-alpha.4",
    "@loaders.gl/draco": "4.1.0-alpha.4"
  },
  ...

[webocean8]

I am also having this issue as well. Same error as above. May I ask how the error has been resolved now?

[webocean8]

I came across a functioning version, kepler.gl-3.0.0-alpha.1.tar.gz, within a node14.21.3 system environment. After executing "yarn" at the root level of the project, the system environment updated to node18.18.2. By running "yarn start" in the project's root, I successfully launched the project.

[echo292]

I came across a functioning version, kepler.gl-3.0.0-alpha.1.tar.gz, within a node14.21.3 system environment. After executing "yarn" at the root level of the project, the system environment updated to node18.18.2. By running "yarn start" in the project's root, I successfully launched the project.

Thank you for leaving your comments on getting the demo project running. Have you successfully got your own project running using the "npm install --save kepler.gl" method?

[AltayAkkus]

I came across a functioning version, kepler.gl-3.0.0-alpha.1.tar.gz, within a node14.21.3 system environment. After executing "yarn" at the root level of the project, the system environment updated to node18.18.2. By running "yarn start" in the project's root, I successfully launched the project.

Thank you for leaving your comments on getting the demo project running. Have you successfully got your own project running using the "npm install --save kepler.gl" method?

can you elaborate? I am still trying to get the demo running, to no avail. Even going back to 2.1 release did not fix my issues, sadly.

[echo292]

@AltayAkkus, I've been at it for about a week now trying to get a custom project working. Initially, I got the demo to work earlier this year with version 3.0.0-alpha 1 and I can't remember the steps I used. My objective is to get it working so I can use React 18.2.0.

Step 1: Based on the current API Reference > Get Started documentation, I first created a project using npx create-react-app my-kepler-app. Then I install kepler with "npm install --save kepler.gl". This out of the box will not work. Need to add react-palm and Redux. This is where I wish the documentation was better. It doesn't step through how to get a project running at all. Step 2: Piggy back off an existing kepler example project. Preferably the demo. As I mentioned earlier, I did get all the examples to work earlier this year. I with I can remember the steps I used to get it working.

Based on the no Kepler activity, I suspect the project has been abandoned and will not receive any new updates from Uber.

The Vis-Academy kepler tutorial works, however that project is using React 16.

[mars-dlx]

This seems related to #2593

[igorDykhta]

demo-app example has recently been updated to use esbuild. Seems that it works as expected.

clone
yarn install
yarn bootstrap
yarn start