[Bug] kepler.gl-master\examples\ returns dependency errors
echo292 opened this issue · 11 comments
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]
Just one other note, my npm cache is clear.
I'm now wondering if it's the latest version of npm causing this.
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?
There are a few suggestions in issue #2549 however none of them worked for me. Does anyone know of a fix?
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
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)
``
@echo292 do you mind sharing other setting such as node version, et? I am still getting errors while running your script
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: kepler-gl-app@0.1.0
npm error Found: react@18.3.1
npm error node_modules/react
npm error react@"^18.3.1" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"0.14.x - 16.x" from @nebula.gl/overlays@1.0.2
npm error node_modules/@nebula.gl/overlays
npm error @nebula.gl/overlays@"1.0.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.
@DButkovskyi, after you create the React project, delete the package.lock file and copy my posted package.json. Then use yarn instead to do the installs.
The only issue with this method, the install needs the correct loaders to create the bundle.js. Otherwise it will not generate the correct function signatures. For example, Draw On Map>Polygon tool and Draw On Map>Rectangle tool. See my errors in previous post.
kepler.gl\webpack the scripts that create the bundle.js. I'm hoping to have some time soon to figure out a way around it.
The Kepler.gl 3.0 release demo github clone doesn't work as per the documentation. Not sure how it past the test scripts.
Same here, it's impossible to install or build.