error while adding hexbin or grid layer in react keplerGL app

[Jdave860]

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:

1. Go to browse files
2. Click on add layer
3. Scroll down to basic and select Hexbin layer or Grid layer
4. 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]

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

[heshan0131]

https://github.com/keplergl/kepler.gl/pull/1602

[Jdave860]

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]

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]

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]

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]

@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]

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

[ikrik]

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]

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?

[elahe-dastan]

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]

Yep, seems like the newest keplergl-jupyter package also has this error, at least v0.3.2. Probably the bug was introduced here: https://github.com/keplergl/kepler.gl/pull/1617

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

[natsuapo]

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]

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

[Rahul-0108]

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]

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

[sinannoureddine]

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

Does anybody have a solution for this? Thanks!

[sinannoureddine]

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]

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]

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'""

[rayavarapusrikanth]

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

[sinannoureddine]

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,

https://github.com/keplergl/kepler.gl/issues/643

Click on the invite link shared in this page

[futurebenmorris]

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 https://github.com/keplergl/kepler.gl/issues/643

Click on the invite link shared in this page

— Reply to this email directly, view it on GitHub https://github.com/keplergl/kepler.gl/issues/1601#issuecomment-1281262792, 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

[rayavarapusrikanth]

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?

[rayavarapusrikanth]

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]

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.

[rayavarapusrikanth]

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

[chiganov]

Hi there, is it going to be fixed?

[jsnetors]

The error persists as of the date of this message.

[Rahul-0108]

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