[Bug] kepler.gl-master\examples\ returns dependency errors

echo292 commented 3 weeks ago

Describe the bug The latest kepler.gl is returning the following errors. Strangely, I never installed react 18.3.1. I had this working last week. Not sure what changed in the latest kepler.gl.

PS c:\dev\kepler.gl-master\kepler.gl-master\examples\demo-app> npm install npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: undefined@undefined npm error Found: react@18.3.1 npm error node_modules/react npm error react@"^18.2.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^16.4.1" from react-palm@1.3.1 npm error node_modules/react-palm npm error react-palm@"^1.1.2" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution.

Running it with --force or --legacy-peer-deps returns the same errors

Node.js version :v18.18.2 Npm version: 10.8.1

PS c:\dev\kepler.gl-master\kepler.gl-master\examples\demo-app> npm list -g react C:\Users\name\AppData\Roaming\npm └── (empty)

PS c:\dev\kepler.gl-master\kepler.gl-master\examples\demo-app> npm list react
demo-app@ c:\dev\kepler.gl-master\kepler.gl-master\examples\demo-app └── (empty)

To Reproduce Steps to reproduce the behavior:

Get latest kepler.gl from master branch
Change directory to any of the example folders. For example --> kepler.gl/examples/demo-app/
Run "npm install"
See errors

Expected behavior Install kepler.gl correctly and "npm start" run correctly in chrome browser.

Desktop (please complete the following information):

OS: Windows 10 Pro [22H2]
Browser [chrome 120.0.6099.291]

IDE -VS Code [1.89.1 2024]

echo292 commented 3 weeks ago

Just one other note, my npm cache is clear.

echo292 commented 3 weeks ago

I'm now wondering if it's the latest version of npm causing this.

echo292 commented 3 weeks ago

bemilton, thank you for tag teaming on this issue. I'm glad to see I'm not alone with the issues.

No matter which flag I use to npm/yarn install the versions in the project package.json, it will always install React 18.3.1 with a cascading dependency issue.

Curious, which version of npm are you using?

echo292 commented 3 weeks ago

Looks like this is a repeat of the same issue reported here: https://github.com/keplergl/kepler.gl/issues/2549

echo292 commented 3 weeks ago

There are a few suggestions in issue #2549 however none of them worked for me. Does anyone know of a fix?

Devidian commented 1 week ago

Same issues here running on Win11, VS Code, WSL2 Debian. Tried yarn/npm in different versions. Yarn 4 reports: react is listed by your project with version 18.3.1 (p63559), which doesn't satisfy what react-copy-to-clipboard and other dependencies request (but they have non-overlapping ranges!).

-----EDIT----- Ok so i have tried to checkout some other tagged versions. 3 alpha 0 seems to install but cant compile. Even 2.5.5 cant compile:

ERROR in bundle.js from Terser Error: error:0308010C:digital envelope routines::unsupported

Malik99-rapido commented 3 days ago

@Devidian for this error ERROR in bundle.js from Terser Error: error:0308010C:digital envelope routines::unsupported you can follow these steps, which worked for me

rm -rf node_modules
rm -rf package-lock.json
switch to node 16
do npm i
if it works good, if it doesn't then do npm i --legacy-peer-deps
npm run dev

echo292 commented 3 days ago

I'm thinking the most common issues are related to outdated babel or webpack scripts.

I was able to get Kepler.gl 3.0 release running with React 18.3.1 and Redux 9.1.2 in a custom project. The only issue I'm troubleshooting now are some uncaught runtime errors using Draw On Map>Polygon tool and Draw On Map>Rectangle tool. In this instance I'm not using any webpack.config.js start scripts which is why I'm may be getting the errors. For now I'm using react-scripts. I think I need the webpack script to make sure it's doing the exports for Turf. I posted the errors at the very bottom.

The Kepler.gl documentation is very outdated.

For any other poor souls trying to get a Kepler.gl project running, see my steps below. Caveat, Draw On Map>Polygon tool and Draw On Map>Rectangle tool return an error. I'm working on a webpack.config.js now to do the exports to see if that will fix the issues.

One thing I haven't tried is to create the project with my steps below then dump any of the /examples projects in to see if it will run.

Setup commands:

npx create-react-app kepler-gl-app
cd kepler-gl-app

npm install ajv kepler.gl assert react-palm react-redux redux redux-thunk deck.gl

project.json

{
  "name": "kepler-gl-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@deck.gl/core": "^8.9.27",
    "@deck.gl/extensions": "^8.9.27",
    "@deck.gl/layers": "^8.9.27",
    "@deck.gl/mapbox": "^8.9.27",
    "@deck.gl/react": "^8.9.27",
    "@kepler.gl/actions": "^3.0.0",
    "@kepler.gl/components": "^3.0.0",
    "@kepler.gl/constants": "^3.0.0",
    "@kepler.gl/processors": "^3.0.0",
    "@kepler.gl/reducers": "^3.0.0",
    "@kepler.gl/styles": "^3.0.0",
    "@loaders.gl/polyfills": "^4.1.0-alpha.4",
    "@luma.gl/core": "^8.5.20",
    "@luma.gl/webgl": "^8.5.20",
    "@nebula.gl/edit-modes": "1.0.2",
    "@nebula.gl/editor": "1.0.2",
    "@nebula.gl/layers": "1.0.2",
    "@nebula.gl/overlays": "1.0.2",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@turf/bbox-polygon": "^7.0.0",
    "@turf/rewind": "^7.0.0",
    "ajv": "^8.16.0",
    "assert": "^2.1.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-markdown": "^9.0.1",
    "react-palm": "^3.3.8",
    "react-redux": "^9.1.2",
    "react-scripts": "5.0.1",
    "react-virtualized": "^9.22.5",
    "react-vis": "^1.11.7",
    "redux": "^5.0.1",
    "redux-thunk": "^3.1.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.16.7",
    "babel-loader": "^8.0.0",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-middleware": "^3.5.1",
    "webpack-dev-server": "^4.15.1",
    "webpack-hot-middleware": "^2.24.3"
  }
}

Draw On Map>Polygon tool and Draw On Map>Rectangle tool return an error:

 Uncaught runtime errors:
    ×
    ERROR
    (0 , _rewind.default) is not a function
    TypeError: (0 , _rewind.default) is not a function
        at DrawPolygonMode.rewindPolygon (localhost:3000/static/js/bundle.js:155146:39)
        at DrawPolygonMode.getAddFeatureAction (localhost:3000/static/js/bundle.js:155160:32)
        at DrawPolygonMode.getAddFeatureOrBooleanPolygonAction (http://localhost:3000/static/js/bundle.js:155251:19)
        at DrawPolygonMode.handleClick (localhost:3000/static/js/bundle.js:153250:31)
        at EditableGeoJsonLayer.onLayerClick (localhost:3000/static/js/bundle.js:161248:28)
        at EditableGeoJsonLayer._onanyclick (localhost:3000/static/js/bundle.js:162032:12)
        at EditableGeoJsonLayer._forwardEventToCurrentLayer (http://localhost:3000/static/js/bundle.js:162022:7)
        at EventRegistrar._emit (localhost:3000/static/js/bundle.js:344192:9)
        at EventRegistrar.handleEvent (localhost:3000/static/js/bundle.js:344090:12)
        at Manager.emit (localhost:3000/static/js/bundle.js:311400:20)

``

    Uncaught runtime errors:
    ×
    ERROR
    (0 , _bboxPolygon.default) is not a function
    TypeError: (0 , _bboxPolygon.default) is not a function
        at DrawRectangleMode.getTwoClickPolygon (localhost:3000/static/js/bundle.js:199052:51)
        at DrawRectangleMode.getGuides (localhost:3000/static/js/bundle.js:205182:26)
        at DrawRectangleMode.getTentativeGuide (localhost:3000/static/js/bundle.js:200606:25)
        at DrawRectangleMode.checkAndFinishPolygon (localhost:3000/static/js/bundle.js:205147:35)
        at DrawRectangleMode.handleClick (localhost:3000/static/js/bundle.js:205121:12)
        at EditableGeoJsonLayer.onLayerClick (localhost:3000/static/js/bundle.js:206738:28)
        at EditableGeoJsonLayer._onanyclick (localhost:3000/static/js/bundle.js:207522:12)
        at EditableGeoJsonLayer._forwardEventToCurrentLayer (localhost:3000/static/js/bundle.js:207512:7)
        at EventRegistrar._emit (localhost:3000/static/js/bundle.js:320708:9)
        at EventRegistrar.handleEvent (localhost:3000/static/js/bundle.js:320606:12)
    ``

keplergl / kepler.gl