Next.js 13 で deck.gl 8.9 を使う時の、モジュール読み込み（ESM）の設定

例えば、Next.jsの app/page.tsx を以下のように記述したとします:

'use client'

import DeckGL from '@deck.gl/react/typed';
import {LineLayer} from '@deck.gl/layers/typed';


// Viewport settings
const INITIAL_VIEW_STATE = {
  longitude: -122.41669,
  latitude: 37.7853,
  zoom: 13,
  pitch: 0,
  bearing: 0
};

// Data to be used by the LineLayer
const data = [
  {sourcePosition: [-122.41669, 37.7853], targetPosition: [-122.41669, 37.781]}
];


export default function Home() {
  const layers = [
    new LineLayer({id: 'line-layer', data})
  ];

  return <DeckGL
  initialViewState={INITIAL_VIEW_STATE}
  controller={true}
  layers={layers} />
}

• deck.gl公式ドキュメントのサンプルが元 - 参考: Using deck.gl with React | deck.gl
• 冒頭の 'use client' により、クライアント・コンポーネントへ - 参考: Getting Started: React Essentials | Next.js

エラー

しかし上記では、以下のようなエラーが発生します:

Failed to compile

./node_modules/@deck.gl/layers/dist/es5/text-layer/font-atlas-manager.js:17:0
Module not found: ESM packages (@mapbox/tiny-sdf) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@deck.gl/layers/dist/es5/text-layer/text-layer.js
./node_modules/@deck.gl/layers/dist/es5/index.js
./app/page.tsx

言及されているページ:

• import-esm-externals | Next.js
• module-not-found | Next.js

解消

上記のエラーを解消するには、 next.config.js へ以下のように設定を追加します:

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

エラーメッセージでも言及される import-esm-externals | Next.js というページで、 experimental.esmExternals: 'loose' を使う方法が提案されています。これにより、このエラーを自動修正するよう試みてくれるそうです。

参考

SSR Error After Upgrading from 8.8 to 8.9 · Issue #7735 · visgl/deck.gl（2023年3月~）

deck.glレポジトリでの上記イシューでは、これに関する、SSRでの事柄が議論されています。

deck.gl 8.9（2023年3月にv8.9.0リリース）では、アップストリームの依存が更新されESモジュールになったため、ということだそうです:

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.