Skip to content

[Bug] CanvasContext getMaxDrawingBufferSize bug in Next.js with React Strict mode #2487

@bgunne

Description

@bgunne

Module and/or Feature

CanvasContext -> getMaxDrawingBufferSize:

const maxTextureDimension = this.device.limits.maxTextureDimension2D;

Description

In some environments (e.g. React Strict Mode / Next.js), a ResizeObserver callback may fire before the WebGL device has fully initialized its limits object. In that case this.device.limits can be temporarily undefined, which would cause a runtime TypeError when reading maxTextureDimension2D.

Runtime TypeError:
Cannot read properties of undefined (reading 'maxTextureDimension2D')

Expected Behavior

Handle undefined value, e.g.:

getMaxDrawingBufferSize(): [number, number] {
// To avoid crashing the app we fall back to the current drawing buffer
// size (or a 1x1 default) until the device limits are available.
const maxTextureDimension = this.device?.limits?.maxTextureDimension2D;

if (!maxTextureDimension) {
  const [width, height] = this.getDrawingBufferSize();
  const fallbackSize = Math.max(1, width, height);
  return [fallbackSize, fallbackSize];
}

return [maxTextureDimension, maxTextureDimension];

}

Steps to Reproduce

Create a DeckGL map in a Next.js app with reactStrictMode:true

Environment

"@deck.gl/core": "^9.2.5" which uses "@luma.gl/core": "^9.2.4",
"react-map-gl": "^8.1.0",
"next": "^16.1.1",

Logs

Cannot read properties of undefined (reading 'maxTextureDimension2D')
Call Stack
3

Hide 3 ignore-listed frame(s)
WebGLCanvasContext.getMaxDrawingBufferSize
node_modules/@luma.gl/core/src/adapter/canvas-context.ts (238:52)
WebGLCanvasContext._handleResize
node_modules/@luma.gl/core/src/adapter/canvas-context.ts (372:62)
ResizeObserver.
node_modules/@luma.gl/core/src/adapter/canvas-context.ts (171:65)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions