Next.js 动态导入无法使用变量作为模块路径

Question

我正在使用 Next.js 构建一个 Web 应用程序，并尝试使用dynamic() 函数动态加载组件。当我使用字符串作为模块路径时，代码工作正常，如下所示：

import dynamic from 'next/dynamic';

const ThreeComponent = dynamic(
  () => import('../../../shared/components/one/two/three/three.component'),
  { ssr: false }
);

但是，当我尝试使用模块路径变量时，如下所示：

import dynamic from 'next/dynamic';

const pathurl = '../../../shared/components/one/two/three/three.component';
const ThreeComponent = dynamic(() => import(`${pathurl}`), { ssr: false });

我收到一条错误消息“错误：找不到模块”。

我已检查模块的路径是否正确，并且我使用的是支持动态导入的 Next.js 版本（9.4 或更高版本）。我还尝试使用项目根目录的绝对路径或相对路径，但仍然遇到相同的错误。

可能是什么原因导致此问题，以及如何使用 Next.js 中模块路径的变量动态加载模块？

正如我在问题中所解释的，我正在尝试运行正确的代码，但它根本不起作用。

Answer 1

他们在官方文档上说应该明确设置路径；它不能是模板文字，也不能是变量：

在 中import('path/to/component')，必须明确写入路径。它不能是模板字符串，也不能是变量。此外，import()必须位于dynamic()Next.js 的调用中，才能将 webpack 包/模块 id 与特定dynamic()调用相匹配，并在渲染之前预加载它们。

如果您想在一个地方处理不同的动态导入，您可以执行如下操作：

import dynamic from "next/dynamic";

const ComponentOne = dynamic(() => import("./One.js"), { ssr: false });
const ComponentTwo = dynamic(() => import("./Two.js"), { ssr: false });

export default function DynamicComponent({ componentNubmer = 1 }) {
  if (componentNubmer == 1) {
    return <ComponentOne />;
  }
  return <ComponentTwo />;
}

并像这样使用它来导入One.js：

<DynamicComponent componentNubmer={1} />