Next13 TypeScript项目中loader.gl依赖表达式请求警告求助

方案1：修改next.config.js的webpack配置抑制警告 #

该警告源于@loaders.gl/worker-utils中的动态require表达式，webpack无法静态分析。可通过webpack配置忽略特定模块的警告：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // 针对特定模块排除警告
      config.ignoreWarnings = [
        {
          module: /@loaders.gl\/worker-utils/,
          message: /Critical dependency: the request of a dependency is an expression/
        }
      ];
    }
    return config;
  },
  // 转译DeckGL相关包确保兼容性
  transpilePackages: ['@deck.gl/core', '@deck.gl/layers', '@loaders.gl/core'],
};

module.exports = nextConfig;

方案2：锁定@loaders.gl的兼容版本 #

部分新版本@loaders.gl与Next.js 13的webpack5兼容性欠佳，尝试降级到稳定兼容版本：

npm install @loaders.gl/core@3.4.16 @loaders.gl/worker-utils@3.4.16
# 或使用yarn
yarn add @loaders.gl/core@3.4.16 @loaders.gl/worker-utils@3.4.16

方案3：禁用DeckGL的Worker功能 #

若业务场景无需Worker，初始化DeckGL时禁用该功能，避免加载相关模块：

'use client';

import DeckGL from '@deck.gl/react';
import ArcLayer from '@deck.gl/layers';

export default function MapPage() {
  const layers = [
    new ArcLayer({
      // 你的ArcLayer配置
      id: 'arc-layer',
      data: [],
      getSourcePosition: d => d.source,
      getTargetPosition: d => d.target,
      getSourceColor: [255, 0, 0],
      getTargetColor: [0, 255, 0]
    })
  ];

  return (
    <DeckGL
      initialViewState={{
        longitude: -122.45,
        latitude: 37.78,
        zoom: 11
      }}
      layers={layers}
      workerLoader={false} // 禁用Worker
    />
  );
}

方案4：优化客户端动态导入 #

确保DeckGL与ArcLayer仅在客户端加载，避免服务端构建时处理：

'use client';

import dynamic from 'next/dynamic';

// 动态导入并禁用服务端渲染
const DeckGL = dynamic(() => import('@deck.gl/react'), { ssr: false });
const ArcLayer = dynamic(
  () => import('@deck.gl/layers').then(mod => ({ default: mod.ArcLayer })),
  { ssr: false }
);

export default function MapPage() {
  const layers = [
    new ArcLayer({
      // 你的ArcLayer配置
      id: 'arc-layer',
      data: []
    })
  ];

  return (
    <DeckGL
      initialViewState={{ longitude: -122.45, latitude: 37.78, zoom: 11 }}
      layers={layers}
    />
  );
}

内容的提问来源于stack exchange，提问作者Chance Reichenberg