deck.gl
deck.gl copied to clipboard
visgl
[Bug] Upgrade Deck.gl v9.0.40 to newer version throws error causing React app to not load
Description
Tried upgrading Deck.gl versions in my React app and started getting the above error. React app didn't load any components, just a blank white screen due to the error with WebGL. Tried looking at documentation and Google but couldn't find my exact error.
Flavors
- [ ] Script tag
- [x] React
- [ ] Python/Jupyter notebook
- [ ] MapboxOverlay
- [x] GoogleMapsOverlay
- [ ] CARTO
- [ ] ArcGIS
Expected Behavior
No error thrown and React app loads with Deck.gl layers on the map, as it does normally with v9.0.40
Steps to Reproduce
Can't share exact code due to copyright. But here's some code I found on codepen that roughly does the same thing.
import {GoogleMapsOverlay as DeckOverlay} from '@deck.gl/google-maps';
// Create map
const map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 40, lng: -100 },
zoom: 5,
mapId: GOOGLE_MAP_ID // Only required for Vector maps
});
// Create overlay instance
const overlay = new DeckOverlay({});
overlay.setProps({
layers: [added some geojsonlayers],
});
// Add overlay to map
overlay.setMap(map);
Environment
- Framework version: [email protected] (but started happening with version 9.1, i think)
- Browser: Firefox and Chrome
- OS: macOS 15.3.2
Logs
Check your actually installed dependencies and make sure that all @deck.gl/* and @luma.gl/* packages are 9.1.x.
I have the same issue in my Angular project! So I kept version 9.0.38 and do not update it until the issue will get fixed.
It is also happening to us with Angular 19. Until deck.gl 9.0.40 everything is ok, but any version of deck.gl and luma 9.1.x crashes with this error
Can someone share your package.json and bundler config for us to reproduce this? It's more likely caused by your dev setup than anything in your JavaScript code.
Hi,
In my case is an Angular 19 project with the default @angular-devkit/build-angular:application as build config. It uses esbuild.
Here you have my package.json
{
"name": "frontend",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"build": "./scripts/build.sh",
"dev": "ng serve",
"serve": "./scripts/serve.sh",
"test": "ng test",
"lint": "ng lint"
},
"private": true,
"dependencies": {
"@angular/animations": "^19.2.0",
"@angular/cdk": "^19.2.1",
"@angular/common": "^19.2.0",
"@angular/compiler": "^19.2.0",
"@angular/core": "^19.2.0",
"@angular/elements": "^19.2.0",
"@angular/forms": "^19.2.0",
"@angular/material": "^19.2.1",
"@angular/material-luxon-adapter": "^19.2.1",
"@angular/platform-browser": "^19.2.0",
"@angular/platform-browser-dynamic": "^19.2.0",
"@angular/platform-server": "^19.2.0",
"@angular/router": "^19.2.0",
"@angular/service-worker": "^19.2.0",
"@angular/ssr": "^19.2.0",
"@apollo/client": "^3.12.3",
"@deck.gl/aggregation-layers": "^9.1.5",
"@deck.gl/core": "^9.1.5",
"@deck.gl/google-maps": "^9.1.5",
"@deck.gl/layers": "^9.1.5",
"@gilsdav/ngx-translate-router": "^7.2.1",
"@googlemaps/js-api-loader": "^1.16.8",
"@ngx-translate/core": "^16.0.3",
"apollo-angular": "^10.0.2",
"apollo-upload-client": "^18.0.1",
"body-parser": "^1.20.3",
"chart.js": "^4.4.7",
"cookie-parser": "^1.4.7",
"country-codes-list": "^2.0.0",
"d3-array": "^3.2.4",
"d3-axis": "^3.0.0",
"d3-ease": "^3.0.1",
"d3-interpolate": "^3.0.1",
"d3-scale": "^4.0.2",
"d3-selection": "^3.0.0",
"d3-shape": "^3.2.0",
"d3-time": "^3.1.0",
"d3-time-format": "^4.1.0",
"d3-transition": "^3.0.1",
"express": "^4.21.2",
"express-winston": "^4.2.0",
"graphql": "^16.10.0",
"graphql-ws": "^6.0.3",
"isbot": "^5.1.21",
"libphonenumber-js": "^1.11.17",
"luxon": "^3.5.0",
"luxon-angular": "^6.0.0",
"ngx-markdown": "^19.0.0",
"ngx-scrollbar": "^18.0.0",
"qrcode": "^1.5.4",
"rxjs": "^7.8.1",
"tslib": "^2.8.1",
"winston": "^3.17.0",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^19.2.0",
"@angular/cli": "^19.2.0",
"@angular/compiler-cli": "^19.2.0",
"@angular/language-service": "^19.2.0",
"@types/d3": "^7.4.3",
"@types/express": "^4.17.21",
"@types/gapi": "^0.0.47",
"@types/gapi.auth2": "^0.0.61",
"@types/google.maps": "^3.55.9",
"@types/gtag.js": "0.0.20",
"@types/jasmine": "^5.1.4",
"@types/jasminewd2": "^2.0.13",
"@types/luxon": "^3.4.2",
"@types/node": "^22.10.2",
"angular-eslint": "19.3.0",
"eslint": "^9.17.0",
"jasmine-core": "~5.6.0",
"jasmine-marbles": "~0.9.2",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.4.4",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"source-map-support": "^0.5.21",
"ts-loader": "^9.5.1",
"ts-node": "~10.9.2",
"typescript": "~5.8.2",
"typescript-eslint": "^8.18.1"
}
}
{
"name": "my-project-name",
"version": "0.3.2",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"lint": "ng lint",
"serve:ssr:app": "node dist/app/server/server.mjs"
},
"private": true,
"dependencies": {
"@angular/animations": "^19.2.4",
"@angular/common": "^19.2.4",
"@angular/compiler": "^19.2.4",
"@angular/core": "^19.2.4",
"@angular/forms": "^19.2.4",
"@angular/google-maps": "^19.2.7",
"@angular/platform-browser": "^19.2.4",
"@angular/platform-browser-dynamic": "^19.2.4",
"@angular/platform-server": "^19.2.4",
"@angular/router": "^19.2.4",
"@angular/ssr": "^19.2.6",
"@auth0/angular-jwt": "^5.2.0",
"@awesome-cordova-plugins/core": "^6.16.0",
"@awesome-cordova-plugins/file-opener": "^6.16.0",
"@capacitor/android": "7.2.0",
"@capacitor/app": "7.0.1",
"@capacitor/camera": "^7.0.1",
"@capacitor/core": "7.2.0",
"@capacitor/filesystem": "^7.0.1",
"@capacitor/geolocation": "^7.1.1",
"@capacitor/haptics": "7.0.1",
"@capacitor/keyboard": "7.0.1",
"@capacitor/status-bar": "7.0.1",
"@deck.gl/core": "9.0.38",
"@deck.gl/google-maps": "9.0.38",
"@deck.gl/layers": "9.0.38",
"@googlemaps/markerclusterer": "^2.5.3",
"@ionic/angular": "^8.5.3",
"@ionic/pwa-elements": "^3.3.0",
"@ngxs-labs/actions-executing": "^19.0.0",
"@ngxs-labs/immer-adapter": "^3.0.5",
"@ngxs-labs/select-snapshot": "^5.0.0",
"@ngxs/devtools-plugin": "^19.0.0",
"@ngxs/form-plugin": "^19.0.0",
"@ngxs/logger-plugin": "^19.0.0",
"@ngxs/router-plugin": "^19.0.0",
"@ngxs/storage-plugin": "^19.0.0",
"@ngxs/store": "^19.0.0",
"@stripe/stripe-js": "^7.0.0",
"@types/dragula": "^3.7.5",
"centrifuge": "^5.3.4",
"cordova-plugin-file-opener2": "^4.0.0",
"dragula": "^3.7.3",
"express": "^5.1.0",
"immer": "^10.1.1",
"ionicons": "^7.4.0",
"jspdf": "^3.0.1",
"lightgallery": "^2.8.3",
"lodash": "^4.17.21",
"moment": "^2.30.1",
"ng2-dragula": "^5.1.0",
"ng2-validation": "^4.2.0",
"ngx-stripe": "^19.0.0",
"ngxs-reset-plugin": "^4.0.0",
"rxjs": "~7.8.2",
"swiper": "^11.2.6",
"tslib": "^2.8.1",
"uuid": "^11.1.0",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^19.2.6",
"@angular-eslint/builder": "^19.3.0",
"@angular-eslint/eslint-plugin": "^19.3.0",
"@angular-eslint/eslint-plugin-template": "^19.3.0",
"@angular-eslint/schematics": "^19.3.0",
"@angular-eslint/template-parser": "^19.3.0",
"@angular/cli": "^19.2.6",
"@angular/compiler-cli": "^19.2.4",
"@angular/language-service": "^19.2.4",
"@capacitor/assets": "^3.0.5",
"@capacitor/cli": "7.2.0",
"@ionic/angular-toolkit": "^12.1.1",
"@types/express": "^5.0.1",
"@types/jasmine": "~5.1.7",
"@types/lodash": "^4.17.16",
"@types/node": "^22.13.17",
"@types/supercluster": "^7.1.3",
"@types/uuid": "^10.0.0",
"@typescript-eslint/eslint-plugin": "^8.29.0",
"@typescript-eslint/parser": "^8.29.0",
"eslint": "^9.23.0",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-jsdoc": "^50.6.9",
"eslint-plugin-prefer-arrow": "1.2.3",
"jasmine-core": "~5.6.0",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.4.4",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.1",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"prettier": "^3.5.3",
"typescript": "^5.8.2"
},
"description": "My project"
}
{
"name": "project",
"version": "1.0.0",
"packageManager": "[email protected]",
"private": true,
"dependencies": {
"@deck.gl/core": "9.0.40",
"@deck.gl/geo-layers": "9.0.40",
"@deck.gl/google-maps": "9.0.40",
"@deck.gl/layers": "9.0.40",
"react": "^17.0.0",
"webpack": "^5.91.0",
"yup": "^1.0.2",
...
},
"overrides": {
"@deck.gl/extensions": "9.0.40",
"@deck.gl/mesh-layers": "9.0.40"
},
"scripts": {
"start:app-only": "vite",
"build": "vite build",
...
},
"browserslist": [
">0.2%",
"not dead",
"not ie < 11",
"not op_mini all"
],
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.14.0",
"@typescript-eslint/parser": "^5.14.0",
"@vitejs/plugin-basic-ssl": "^1.1.0",
"@vitejs/plugin-react": "^4.3.2",
"@vitest/browser": "^2.1.2",
"@vitest/coverage-istanbul": "^2.1.2",
"@vitest/coverage-v8": "^2.1.2",
"@vitest/ui": "^2.1.2",
"acorn": "^6.3.0",
"acorn-dynamic-import": "^4.0.0",
"babel-core": "^6.26.3",
"babel-plugin-istanbul": "^6.1.1",
"babel-plugin-styled-components": "^2.0.6",
"babel-preset-react-app": "^10.0.1",
"eslint": "^8.10.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.5.0",
"eslint-config-react-app": "^7.0.1",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "4.0.0",
"eslint-plugin-react": "^7.29.3",
"eslint-plugin-react-hooks": "^4.3.0",
"googlemaps": "^1.12.0",
"prettier": "^2.5.1",
"typescript": "^4.6.2",
"typescript-plugin-styled-components": "^1.6.0",
"vite": "^5.4.9",
"vite-plugin-svgr": "^4.2.0",
"vite-tsconfig-paths": "^5.0.1",
"vitest": "^2.1.2",
"vitest-canvas-mock": "^0.3.3",
....
}
}
Same issue in React. Spent a bunch of time trying to figure out what/why is it happening without any result.
Sorry folks, I am still unable to reproduce it locally.
- @ruizmarc I bootstrapped a new angular app and deck.gl renders fine. But I'm not an angular person so maybe I'm missing something in your setup.
- @havelr As you can see all our examples use Vite. You can clone the repo and try run any of them yourself.
Sorry folks, I am still unable to reproduce it locally.
I've run into this issue today and it's completely stumped me. Even after trying multiple versions of deck.gl and react-google-maps, clearing npm cache, deleting package-lock and reverting to old branches where I know it was working the error persists. Makes no sense to me. I even tried running it ( code which was working fine before ) on a vps.
I also tried installing the "deckgl overlay" example from react-google-maps, only to result in the same error.
The weirdest thing is I had this same error this morning and it stopped happening for a few hours.
UPDATE EDIT: Switching from google to mapbox avoids the issue but I'm going to take a deeper look later on, really confused by this.
I was getting a similar error using 9.1.12:
Downgrading to 9.0.40 fixed it. I think this ticket in luma.gl is a viable fix whenever they implement it: https://github.com/visgl/luma.gl/issues/2396
I was getting a similar error using 9.1.12:
Downgrading to 9.0.40 fixed it. I think this ticket in luma.gl is a viable fix whenever they implement it: visgl/luma.gl#2396
I was having this issue and solved using this solution. Patched luma.gl, works great. I had never worked with patch-package, but it was pretty simple and everything works great now.
I didn't downgrade either, just used current deck.gl and luma.gl versions.
As a quick fix without having to modify the package, I just added this to the page where we're using deck.gl:
import { webgl2Adapter } from '@luma.gl/webgl';
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
webgl2Adapter;
This makes sure the webgl adapter is always included in the js bundle, and that fixed the problem for me.
I had the same issue and used the workaround by @lucasvanhalst After upgrading to deck.gl 9.2 I removed the workaround and it worked like expected.
