关键依赖：依赖的请求是 loader.gl 在 Next13 typescript 应用程序中的表达式答案

【问题标题】：Critical dependency: the request of a dependency is an expression for loader.gl In a Next13 typescript application关键依赖：依赖的请求是 loader.gl 在 Next13 typescript 应用程序中的表达式
【发布时间】：2023-02-10 04:13:07
【问题描述】：

我已经设置了一个 Next13 typescript 应用程序。在这里面，我试图在 Mapbax 底图上渲染一个 deckgl arclayer。

const Page = () => {
  const data = [{ sourcePosition: [-122.41669, 37.7853], targetPosition: [-122.41669, 37.781] }];
  const isClient = typeof window !== 'undefined';

  const layer = isClient
    ? new ArcLayer({
        id: 'arc-layer',
        migration,
        pickable: true,
        getWidth: (d: AreaMigration) => d.moves_estimated / 10,
        getSourcePosition: (d: AreaMigration) => states[d.origin_us_state],
        getTargetPosition: (d: AreaMigration) => states[d.destination_us_state],
        //@ts-ignore
        getSourceColor: (d: AreaMigration) => [...hexToRgb(Primary.Primary01), 255],
        //@ts-ignore
        getTargetColor: (d: AreaMigration) => [...hexToRgb(Secondary.Secondary01), 125],
      })
    : undefined;

  return (
    <MapboxPageStyled>
      {isClient && (
        <DeckGL
          initialViewState={INITIAL_VIEW_STATE}
          controller={true}
          style={{ width: '100%', height: '100%', borderRadius: '3px', overflow: 'hidden' }}
          layers={[layer]}
        >
          <ReactMapGL />
        </DeckGL>
      )}
      <Paragraph>{migration[0].origin_area}</Paragraph>
    </MapboxPageStyled>
  );
};

构建页面时出现错误 warn - ./node_modules/@loaders.gl/worker-utils/dist/es5/lib/node/require-utils.node.js Critical dependency: the request of a dependency is an expression

我修改了 next-config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: { appDir: true, esmExternals: 'loose' },
  transpilePackages: ['@loaders.gl', '@probe.gl'],
};

module.exports = nextConfig;

并已在页面上启用客户端呈现。

所有帮助表示赞赏！

我也尝试在 arclayer 和 deckgl 上使用动态导入功能但没有成功。

【问题讨论】：

标签： reactjs next.js server-side-rendering deck.gl nextjs13

【解决方案1】：

我有同样的问题，我花了很多时间。只需降级@loaders.gl，这会导致 3.1.8 版本出现问题。

如果您使用的是 npm，请将下一个覆盖添加到您的package.json：

  "overrides": {
    "@loaders.gl/core": "3.1.8",
    "@loaders.gl/images": "3.1.8",
    "@loaders.gl/3d-tiles": "3.1.8",
    "@loaders.gl/gis": "3.1.8",
    "@loaders.gl/textures": "3.1.8",
    "@loaders.gl/terrain": "3.1.8",
    "@loaders.gl/schema": "3.1.8",
    "@loaders.gl/gltf": "3.1.8",
    "@loaders.gl/tiles": "3.1.8",
    "@loaders.gl/loader-utils": "3.1.8"
  }

之后，只需删除您的node_modules 文件夹和package-lock.json

祝你好运：）

【讨论】：