SSR Error After Upgrading from 8.8 to 8.9

[aemonm]

Description

After upgrading from 8.8 to 8.9 via npm update, I receive the following error when trying to build my NextJS App:

Instead change the require of index.js in /Users/aemon/Worky/cerulean-ui/node_modules/@deck.gl/layers/dist/es5/text-layer/font-atlas-manager.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/aemon/Worky/cerulean-ui/node_modules/@deck.gl/layers/dist/es5/text-layer/font-atlas-manager.js:17:39)
    at Object.<anonymous> (/Users/aemon/Worky/cerulean-ui/node_modules/@deck.gl/layers/dist/es5/text-layer/text-layer.js:32:49)
    at Object.<anonymous> (/Users/aemon/Worky/cerulean-ui/node_modules/@deck.gl/layers/dist/es5/geojson-layer/sub-layer-map.js:16:41)
    at Object.<anonymous> (/Users/aemon/Worky/cerulean-ui/node_modules/@deck.gl/layers/dist/es5/geojson-layer/geojson-layer.js:32:20)
    at Object.<anonymous> (/Users/aemon/Worky/cerulean-ui/node_modules/@deck.gl/layers/dist/es5/index.js:119:44)
    at 9801 (/Users/aemon/Worky/cerulean-ui/.next/server/pages/index.js:1391:18)
    at __webpack_require__ (/Users/aemon/Worky/cerulean-ui/.next/server/webpack-runtime.js:25:42)
    at 5297 (/Users/aemon/Worky/cerulean-ui/.next/server/pages/index.js:134:79)
    at __webpack_require__ (/Users/aemon/Worky/cerulean-ui/.next/server/webpack-runtime.js:25:42)
    at /Users/aemon/Worky/cerulean-ui/.next/server/pages/index.js:1093:79
    at __webpack_require__.a (/Users/aemon/Worky/cerulean-ui/.next/server/webpack-runtime.js:89:13)
    at 5075 (/Users/aemon/Worky/cerulean-ui/.next/server/pages/index.js:1066:21)
    at __webpack_require__ (/Users/aemon/Worky/cerulean-ui/.next/server/webpack-runtime.js:25:42)
    at __webpack_exec__ (/Users/aemon/Worky/cerulean-ui/.next/server/pages/index.js:1499:39)
    at /Users/aemon/Worky/cerulean-ui/.next/server/pages/index.js:1500:28
    at Object.<anonymous> (/Users/aemon/Worky/cerulean-ui/.next/server/pages/index.js:1503:3)
    at Object.requirePage (/Users/aemon/Worky/cerulean-ui/node_modules/next/dist/server/require.js:88:12)
    at /Users/aemon/Worky/cerulean-ui/node_modules/next/dist/server/load-components.js:49:73
    at async Object.loadComponentsImpl [as loadComponents] (/Users/aemon/Worky/cerulean-ui/node_modules/next/dist/server/load-components.js:49:26)
    at async /Users/aemon/Worky/cerulean-ui/node_modules/next/dist/build/utils.js:858:32
    at async Span.traceAsyncFn (/Users/aemon/Worky/cerulean-ui/node_modules/next/dist/trace/trace.js:79:20) {
  code: 'ERR_REQUIRE_ESM'

Flavors

• React
• Python/Jupyter notebook
• MapboxLayer
• GoogleMapsOverlay
• CartoLayer
• DeckLayer/DeckRenderer for ArcGIS

Expected Behavior

After reading the Upgrade Guide, I didn't notice any breaking changes that should affect my code as it is. I should still be able to build my app.

Steps to Reproduce

I will try and supply this, but judging from the stack trace I supplied something seems to be amiss

Environment

• Framework version: 8.9
• Browser:
• OS: macOS 13.2.1

Logs

No response

[yosephha]

+1

[brandonjpierce]

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',
},

[Pessimistress]

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.

[DonovanCharpin]

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

[Pessimistress]

@DonovanCharpin The problem is not the DeckGL component. You cannot import any layer that reference the above mentioned modules (e.g. TextLayer, GeoJsonLayer, MVTLayer) on the server side.

[DonovanCharpin]

@Pessimistress my component contains a map and is loaded dynamically (not ssr)

const MyMap = dynamic(
  () => import("../../components/react-map-gl/static-react-map-gl.component"),
  {
    ssr: false,
  }
);

This component imports BitmapLayer, GeoJsonLayer, IconLayer and TextLayer from @deck.gl/layers. At build time, it still breaks. I'm not able to build the nextjs app that I'm able to do with next13 and deck v8.8.

[Pessimistress]

@DonovanCharpin Look at the trace stack of the error and it will tell you which component is doing the problematic import. Sorry I can't be of more assistance because I can only speculate based on your description.

[DonovanCharpin]

@Pessimistress The stack was mainly the same as the one shared above. I will post my stack here as well if it can help. But basically, I don't use deckGL outside of this component and this component is not loaded on SSR, so I'm not sure what would be wrong.

[brandonjpierce]

I was able to confirm the fix proposed by @Pessimistress worked for us. We have a similar sounding setup @DonovanCharpin

src/pages/index.tsx --> where we do the dynamic import
src/app.tsx --> where deck.gl and layer imports live, no dynamic imports
src/layers/thing.ts --> imported in the above file