error while adding hexbin or grid layer in react keplerGL app #1601

Jdave860 · 2021-09-03T09:08:24Z

Describe the bug
I am trying to visualized the Point data in keplergl using React app and wanted to add Hexbin or Grid layer but giving me errors.

Errors:
An error in deck.gl: Cannot read property '8' of undefined in nb74usl
An error in deck.gl: Cannot read property 'sortedBins' of undefined in nb74usl-hexagon-cell

To Reproduce
Steps to reproduce the behavior:

Go to browse files
Click on add layer
Scroll down to basic and select Hexbin layer or Grid layer
See error
An error in deck.gl: Cannot read property '8' of undefined in nb74usl
An error in deck.gl: Cannot read property 'sortedBins' of undefined in nb74usl-hexagon-cell

Expected behavior
Should visualize the point data with hexbin or Grid layer

Screenshots

](url)

React and keplerGL version with supported Dependencies:
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"kepler.gl": "^2.5.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"styled-components": "^5.0.1",
"swr": "^0.1.18",
"web-vitals": "^1.0.1"

Additional context
I tried using the given solution on GitHub to add Colorbrewer 1.5.0 version but it still doesn't work.

heshan0131 · 2021-09-03T22:09:25Z

this should be fixed by adding "@deck.gl/aggregation-layers": "8.2.0" to your package.json "resolutions"

heshan0131 · 2021-09-03T22:11:17Z

#1602

Jdave860 · 2021-09-06T10:20:05Z

I tried using resolutions @deck.gl/aggregation-layers": "8.2.0 in my package.json file. It helped me to fix grid Layer but hexbin layer is still not working it is showing me an error

"TypeError: Class constructor Geometry cannot be invoked without 'new'"

Supporting libraries version used:

"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"kepler.gl": "^2.5.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"styled-components": "^5.3.1",
"swr": "^1.0.0",
"web-vitals": "^1.0.1"
},
"resolutions": {
"@deck.gl/aggregation-layers": "8.2.0"
},

ikrik · 2021-09-06T11:43:51Z

Exactly the same bug!

{
  "dependencies": {
      "kepler.gl": "2.5.2"
   },
  "resolutions":  {
     "@deck.gl/aggregation-layers": "8.2.0",
     "@deck.gl/core": "8.2.0",
     "@deck.gl/extensions": "8.2.0",
     "@deck.gl/geo-layers": "8.2.0",
     "@deck.gl/layers": "8.2.0",
     "@deck.gl/mesh-layers": "8.2.0",
     "@deck.gl/react": "8.2.0",
     "deck.gl": "8.2.0"
   }
}

samnichols-cpc · 2021-09-09T12:43:35Z

I'm still having the same errors when I add in the aggregation layer

"dependencies": { "kepler.gl": "^2.5.4", }, "resolutions": { "@deck.gl/aggregation-layers": "8.2.0" }

heshan0131 · 2021-09-13T05:37:25Z

Can you post a reproducible repo?

The Class constructor Client cannot be invoked without 'new' is a different error. Why is your project building from deck.gl ES6 source instead of ES5? If you are building from ES6 you need proper babel setup to transpile the source code

punov · 2021-09-13T20:21:16Z

@heshan0131 Unfortunately, fixed version of Deck GL packages (8.2.0) blocked a lot of Deck GL functionality we used, for improving our User experience - on of them is a chance to traverse tiles on viewport load for Deck GL layers, that is a functionality of Deck that we used cause it wasn't available via Kepler so we used it directly (super useful to let the user interact with every tile of a tile layer).

Jdave860 · 2021-09-14T05:16:27Z

I have created the repo and the link to the repo is https://github.com/Jdave860/keplergl-demoapp.git

ikrik · 2021-09-18T17:37:47Z

Just a quick solution that worked for me.

In first place my package.json in the "resolutions" key was like the snippet below:

"resolutions": {
    "@deck.gl/aggregation-layers": "8.2.0",
    "@deck.gl/core": "8.2.0",
    "@deck.gl/extensions": "8.2.0",
    "@deck.gl/geo-layers": "8.2.0",
    "@deck.gl/layers": "8.2.0",
    "@deck.gl/mesh-layers": "8.2.0",
    "@deck.gl/react": "8.2.0",
    "deck.gl": "8.2.0"
  },

By searching the web I found that deck.gl and luma.gl are moving in parallel. Also the class constructor Geometry error is created by importing Geometry from @luma.gl/core.

After deleting my node_modules files and running yarn install I noticed in yarn.lock that deck.gl was in 8.2.0 (as it should be) but luma.gl was upgraded to ^8.5.4 which probably causes the error.

so, I also added luma libraries in "resolutions" key like the snippet below, I deleted my "node_modules" folder and "yarn.lock" file again and finally I re-run yarn install

"resolutions": {
    "@deck.gl/aggregation-layers": "8.2.0",
    "@deck.gl/core": "8.2.0",
    "@deck.gl/extensions": "8.2.0",
    "@deck.gl/geo-layers": "8.2.0",
    "@deck.gl/layers": "8.2.0",
    "@deck.gl/mesh-layers": "8.2.0",
    "@deck.gl/react": "8.2.0",
    "deck.gl": "8.2.0",
    "@luma.gl/shadertools": "8.2.0",
    "@luma.gl/core": "8.2.0",
    "@luma.gl/experimental": "8.2.0",
    "@luma.gl/constants": "8.2.0",
    "@luma.gl/engine": "8.2.0",
    "@luma.gl/gltools": "8.2.0",
    "@luma.gl/webgl": "8.2.0"
  }

And the error gone. Now I was able to change point to hexbin and vise-versa without any errors.

futurebenmorris · 2021-10-08T14:30:41Z

I added resolutions as suggested in the thread by @ikrik and got the same outcome as @Jdave860 where it fixed the grid layer but not the hex layer. Similar error:

Looks like my project is also building from deck.gl ES6, which I assume is how kepler.gl is using deck.gl internally. Could you help @heshan0131 with what a 'proper' babel setup would be in order to see if that fixes the issue?

Current keplergl version may cause keplergl/kepler.gl#1601

elahe-dastan · 2021-11-08T11:43:55Z

I was learning how to work with kepler using your doc https://docs.kepler.gl/docs/keplergl-jupyter and was stuck there because of this error, It's nice to remove it from your doc till the issue is resolved.

Rikuoja · 2021-11-08T13:08:52Z

Yep, seems like the newest keplergl-jupyter package also has this error, at least v0.3.2. Probably the bug was introduced here: #1617

Had to downgrade keplergl-jupyter for our Jupyter Notebook to work. Looks like v0.3.0 keplergl-jupyter still works.

natsuapo · 2022-05-11T03:44:05Z

One simple solution for it (though not perfect):
In src/layers/h3-hexagon-layer/h3-hexagon-layer.js, change EnhancedColumnLayer to ColumnLayer.
(of course you need to import ColumnLayer from '@deck.gl/layers/src/column-layer/column-layer'; at first. )

I did not check whether in other places replacing enhancedColumnLayer with ColumnLayer would work, but I assume it will.

natsuapo · 2022-05-13T02:40:21Z

@ejrtn You may try my solution if you build kepler.gl by yourself.

Rahul-0108 · 2022-05-13T05:42:00Z

Any solution that works for hexbin class constructor bug

I tried @ikrik ' suggestion but that did not work

My Package.json

Any solution please to solve the Hexbin Layer error ??

Rahul-0108 · 2022-05-17T16:31:15Z

Can We use Bing Map as base Map for kepler gl, Can anyone pls answer this ??

sinannoureddine · 2022-07-24T16:42:05Z

I'm having the same error. "Class constructor Geometry cannot be invoked without 'new'""

Does anybody have a solution for this? Thanks!

sinannoureddine · 2022-07-24T17:59:47Z

this should be fixed by adding "@deck.gl/aggregation-layers": "8.2.0" to your package.json "resolutions"

This doesn't fix the issue unfortunately.

DarylFernandes99 · 2022-07-28T03:58:55Z

Try adding the following to resolutions and scripts in package.json, this worked for kepler.gl version 2.5.4
"resolutions": { "@deck.gl/mesh-layers": "8.6.8", "@deck.gl/aggregation-layers": "8.6.8", "@deck.gl/carto": "8.6.8", "@deck.gl/core": "8.6.8", "@deck.gl/extensions": "8.6.8", "@deck.gl/geo-layers": "8.6.8", "@deck.gl/google-maps": "8.6.8", "@deck.gl/json": "8.6.8", "@deck.gl/layers": "8.6.8", "@deck.gl/mapbox": "8.6.8", "@deck.gl/react": "8.6.8", "@luma.gl/core": "8.5.10", "@luma.gl/constants": "8.5.10", "@luma.gl/experimental": "8.5.10", "@luma.gl/shadertools": "8.5.10", "@luma.gl/engine": "8.5.10", "@luma.gl/gltools": "8.5.10", "@luma.gl/webgl": "8.5.10" },

"scripts": { "preinstall": "npx npm-force-resolutions", .............. }

albcunha · 2022-08-15T04:17:36Z

Try adding the following to resolutions and scripts in package.json, this worked for kepler.gl version 2.5.4 "resolutions": { "@deck.gl/mesh-layers": "8.6.8", "@deck.gl/aggregation-layers": "8.6.8", "@deck.gl/carto": "8.6.8", "@deck.gl/core": "8.6.8", "@deck.gl/extensions": "8.6.8", "@deck.gl/geo-layers": "8.6.8", "@deck.gl/google-maps": "8.6.8", "@deck.gl/json": "8.6.8", "@deck.gl/layers": "8.6.8", "@deck.gl/mapbox": "8.6.8", "@deck.gl/react": "8.6.8", "@luma.gl/core": "8.5.10", "@luma.gl/constants": "8.5.10", "@luma.gl/experimental": "8.5.10", "@luma.gl/shadertools": "8.5.10", "@luma.gl/engine": "8.5.10", "@luma.gl/gltools": "8.5.10", "@luma.gl/webgl": "8.5.10" },

"scripts": { "preinstall": "npx npm-force-resolutions", .............. }

I tried your solution but I still got the same erro "Class constructor Geometry cannot be invoked without 'new'""

ghost · 2022-10-17T17:55:38Z

I tried all the above solutions and unfortunately I still see the same error. Does anyone has any update on this?

sinannoureddine · 2022-10-17T18:03:40Z

I tried all the above solutions and unfortunately I still see the same error. Does anyone has any update on this?

Hello rayavarapusrikanth, please join the slack community for Kepler GL so i can share with you the solution i did. Best,

#643

Click on the invite link shared in this page

futurebenmorris · 2022-10-18T07:53:45Z

Would be great if you could share it here too so we can all benefit from it :)

On Mon, 17 Oct 2022 at 19:03, sinannoureddine ***@***.***> wrote: I tried all the above solutions and unfortunately I still see the same error. Does anyone has any update on this? Hello rayavarapusrikanth, please join the slack community for Kepler GL so i can share with you the solution i did. Best, #643 <#643> Click on the invite link shared in this page — Reply to this email directly, view it on GitHub <#1601 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUXO6XQTHWRAFC3I2ACCB53WDWIIRANCNFSM5DLKIJMQ> . You are receiving this because you commented.Message ID: <keplergl/kepler. ***@***.***>

-- -- *Ben Morris* / CTO ***@***.*** ***@***.***> / +44 7765 103 723 Futurehand Ltd. 29/31 Monson Rd, Tunbridge Wells, TN1 1LS w3w: ever.arrow.verbs <https://what3words.com/ever.arrow.verbs> www.futurehand.co.uk

ghost · 2022-10-18T10:12:40Z

thanks @sinannoureddine for your response and also for sharing static html file with working hexbin and grid layers.

I also found that when I clone kepler.gl repo and built it locally and run the app, then I don't see this issue and everything working fine. I assume there is fix ready for the above issue in code and it's just we need a new release with those changes. I see the last version is a year ago. Any idea on when we can expect a new version of Kepler.gl package?

ghost · 2022-10-18T10:13:50Z

That's the reason we don't see this issue in kepler.gl/demo as it's build on latest code instead of Kepler.gl package. I hope we get newer version of package soon as many people are facing this issue.

futurebenmorris · 2022-10-18T16:48:57Z

Good shout. For now we should just build the package locally from the repo instead of installing from NPM then... Until a version bump is done by the maintainers.

ghost · 2022-10-18T18:09:59Z

can someone point to guide to build the kepler.js package locally and use it in our react project?

chiganov · 2023-04-03T11:56:20Z

Hi there, is it going to be fixed?

jsnetors · 2024-01-03T22:37:45Z

The error persists as of the date of this message.

Rahul-0108 · 2024-01-04T00:19:18Z

I worked on kepler gl a year ago . I remember this works pn production build and we get error in development build so just use production build. At the end of day we will deploy the production build only

Jdave860 added the bug Something isn't working label Sep 3, 2021

This was referenced Sep 3, 2021

Error While trying to add Hexbin layer #1599

Open

[Bug] error while adding hexbin or grid layer in react keplerGL app #1597

Open

Rikuoja added a commit to GispoCoding/ipygis that referenced this issue Nov 8, 2021

Do not allow keplergl@0.3.0 for now

400487f

Current keplergl version may cause keplergl/kepler.gl#1601

shern2 mentioned this issue Dec 28, 2021

[Bug][Jupyter Widget] Hexbin fails with EnhancedColumnLayer TypeError #1644

Open

Rikuoja mentioned this issue Jan 17, 2022

Display all fields in Kepler tooltip, not just first five GispoCoding/geoviz-notebooks#21

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

error while adding hexbin or grid layer in react keplerGL app #1601

error while adding hexbin or grid layer in react keplerGL app #1601

Jdave860 commented Sep 3, 2021

heshan0131 commented Sep 3, 2021

heshan0131 commented Sep 3, 2021

Jdave860 commented Sep 6, 2021

ikrik commented Sep 6, 2021 •

edited

Loading

samnichols-cpc commented Sep 9, 2021

heshan0131 commented Sep 13, 2021

punov commented Sep 13, 2021

Jdave860 commented Sep 14, 2021

ikrik commented Sep 18, 2021 •

edited

Loading

futurebenmorris commented Oct 8, 2021 •

edited

Loading

elahe-dastan commented Nov 8, 2021

Rikuoja commented Nov 8, 2021

natsuapo commented May 11, 2022 •

edited

Loading

natsuapo commented May 13, 2022

Rahul-0108 commented May 13, 2022 •

edited

Loading

Rahul-0108 commented May 17, 2022

sinannoureddine commented Jul 24, 2022

sinannoureddine commented Jul 24, 2022

DarylFernandes99 commented Jul 28, 2022

albcunha commented Aug 15, 2022

ghost commented Oct 17, 2022

sinannoureddine commented Oct 17, 2022

futurebenmorris commented Oct 18, 2022 via email

ghost commented Oct 18, 2022

ghost commented Oct 18, 2022

futurebenmorris commented Oct 18, 2022

ghost commented Oct 18, 2022

chiganov commented Apr 3, 2023

jsnetors commented Jan 3, 2024

Rahul-0108 commented Jan 4, 2024

error while adding hexbin or grid layer in react keplerGL app #1601

error while adding hexbin or grid layer in react keplerGL app #1601

Comments

Jdave860 commented Sep 3, 2021

heshan0131 commented Sep 3, 2021

heshan0131 commented Sep 3, 2021

Jdave860 commented Sep 6, 2021

ikrik commented Sep 6, 2021 • edited Loading

samnichols-cpc commented Sep 9, 2021

heshan0131 commented Sep 13, 2021

punov commented Sep 13, 2021

Jdave860 commented Sep 14, 2021

ikrik commented Sep 18, 2021 • edited Loading

futurebenmorris commented Oct 8, 2021 • edited Loading

elahe-dastan commented Nov 8, 2021

Rikuoja commented Nov 8, 2021

natsuapo commented May 11, 2022 • edited Loading

natsuapo commented May 13, 2022

Rahul-0108 commented May 13, 2022 • edited Loading

Rahul-0108 commented May 17, 2022

sinannoureddine commented Jul 24, 2022

sinannoureddine commented Jul 24, 2022

DarylFernandes99 commented Jul 28, 2022

albcunha commented Aug 15, 2022

ghost commented Oct 17, 2022

sinannoureddine commented Oct 17, 2022

futurebenmorris commented Oct 18, 2022 via email

ghost commented Oct 18, 2022

ghost commented Oct 18, 2022

futurebenmorris commented Oct 18, 2022

ghost commented Oct 18, 2022

chiganov commented Apr 3, 2023

jsnetors commented Jan 3, 2024

Rahul-0108 commented Jan 4, 2024

ikrik commented Sep 6, 2021 •

edited

Loading

ikrik commented Sep 18, 2021 •

edited

Loading

futurebenmorris commented Oct 8, 2021 •

edited

Loading

natsuapo commented May 11, 2022 •

edited

Loading

Rahul-0108 commented May 13, 2022 •

edited

Loading