deck.gl: SSR Error After Upgrading from 8.8 to 8.9

In 8.9 a few upstream dependencies are updated to their latest version, including @mapbox/tiny-sdf and d3-*. They are pure ESM modules and cannot be imported by require() from the commonjs entry point.

You may want to look into next.js config that lets you control the module resolution for server-side bundle - @deck.gl/*/dist/esm is the entry point using import/export syntax. (i.e. module instead of main in package.json)

Whatever the solution is, we cannot go backward on these dependencies. Security vulnerabilities in those libraries are not fixed in the old versions.

Edit: I spent a little time poking around and it doesn’t seem easy to override next’s webpack configs. At this point I would recommend isolating your deck.gl-related imports and exclude it from SSR:

/// components/deck-map.js
import DeckGL, {TextLayer} from 'deck.gl';

export default function DeckMap() {
  return <DeckGL ... />
}

/// pages/index.js
import dynamic from 'next/dynamic';
const DeckMap = dynamic(() => import('../components/deck-map'), {
  ssr: false
});

export default function Home() {
  return <DeckMap />;
}

deck.gl renders into a WebGLContext so it wouldn’t benefit from SSR anyways.

Tried a few tricks to see if I could get this to work on Next v13.x.x but unfortunately none of them worked:

next.config.js

transpilePackages: ['@deck.gl/layers', '@mapbox/tiny-sdf'],
experimental: {
  esmExternals: 'loose',
},

None of the above works for me !

For people with a vitest issue about an ESM import, if alias failed then you can try this in your vitest.setup.tsx file in order to mock it (this solution works only if you do not need to test rendering things):

beforeAll(() => {
  vitest.mock('@deck.gl/layers/typed', () => {
    return {
      default: () => {},
      GeoJsonLayer: class GeoJsonLayer{},
      PathLayer: class PathLayer{},
      TextLayer: class TextLayer{},
      // ... whatever layers you are using
    }
  })
})

Hope it helps 😃

Seems it might still be an issue with aggregation layers.

The above fix works but as soon as I try and use the HexagonLayer import { HexagonLayer } from '@deck.gl/aggregation-layers/typed' It’ll break

Hello, I have created a repo to reproduce the problem and how to fix this thanks to @Pessimistress  This repo was created with latest code (by the time it was written) NextJS 13.3.0 and DeckGL 8.9.8

There are 2 pages: index and working

The index page throws the error described in this issue:

Error: require() of ES Module /project/deckgl-error/node_modules/@mapbox/tiny-sdf/index.js from /project/deckgl-error/node_modules/@deck.gl/layers/dist/es5/text-layer/font-atlas-manager.js not supported.

The page working is refactored in order to move the deckgl code to a component and dynamically import that component with ssr:false

I hope there is a better way to do this. We have a big app and the refactoring will take some time.

PS: If you want to see the map, you have to enter your mapbox token in the MAPBOX_ACCESS_TOKEN variable

Github: https://github.com/xap5xap/deckgl-error

codeSandbox: code

INDEX:

MAP:

A possible solution here would be to configure our build step to bundle @mapbox/tiny-sdf and any other ESM-only packages, moving them from dependencies to devDependencies inlined into the published bundle.

The main obstacle is that the esbuild API does not offer a good way to specify, “externalize everything except X”. Without that we’d have to explicitly list every dependency that isn’t X. I’ve upvoted the relevant feature requests on esbuild…

• https://github.com/evanw/esbuild/issues/3442
• https://github.com/evanw/esbuild/issues/3215

… and offered to contribute a CommonJS build to @mapbox/tiny-sdf:

• https://github.com/mapbox/tiny-sdf/issues/53

Either of those should unblock deckgl.

I struggled with this issue for a quite a while with none of the solutions here working for me. Eventually I stumbled into this section of the docs for anyone also having issues.

// src/components/map.js
import DeckGL, {TextLayer} from 'deck.gl';

export default function Map() {
  return <DeckGL ... />
}

//src/pages/app.js
import dynamic from 'next/dynamic';
const Map = dynamic(() => import('../components/map'), {ssr: false});

export default function App() {
  return <Map />;
}

For a NextJS setup, adding 'use client' at the top of the file importing deck.gl (components/deck-map.js in this example) solved the problem for me.

See https://nextjs.org/docs/app/building-your-application/rendering/client-components

@x17Andrew71x this weird because i tried it before and it didn’t work but made a new project and worked for some reason!!

That’s great that you got it, my guess would be there’s a version difference somewhere in the installed packages.

@Pessimistress: I’m loading DeckGL (v8.9.2) and NebulaGL with a dynamic import (ssr: false), but I still get this issue when I build next build (v13.2.4)

+1