关键依赖项:依赖项的请求是loader的表达式.在Next13打字应用程序中

Question

我已经设置了一个Next13打字应用程序。在这个里面，我试图在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上使用动态导入功能，但没有成功。

Answer 1

我也有同样的问题，我花了很多时间。降级@loaders。

如果你使用的是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

祝你好运

Answer 2

我在Github上找到了一个可以抑制错误的解决方案:

// next.config.js
const nextConfig = {
...
webpack: (config) => {
...
// Fixes warning Critical dependency: the request of a dependency is an expression
config.module = {
...config.module,
exprContextCritical: false,
};
return config;
},
};
module.exports = nextConfig;