Next.js：变量模块路径动态导入组件失败，如何用相对路径加载？

你遇到的报错是因为Webpack（Next.js底层打包工具）需要在编译阶段明确动态导入的模块范围，完全动态的路径字符串（比如你用${path}这种写法）会让它无法提前解析要打包的模块，所以模块映射里找不到目标组件。

解决方法如下：

1. 直接使用固定相对路径（推荐） #

根据你的目录结构，login组件位于components/page/login，hello组件在components/shared/hello.js，两者的相对路径是../../shared/hello，直接写在import里即可：

const DynamicComponent = dynamic(() => import('../../shared/hello'), {
    ssr: false,
});

return (
    <div>
        <DynamicComponent />
    </div>
);

2. 若需部分动态（保留固定前缀） #

如果必须用变量动态拼接路径，一定要给Webpack留固定的前缀，让它知道要打包哪些目录下的模块，比如：

// 固定前缀为../../shared/，仅动态组件名称部分
const componentName = 'hello';
const DynamicComponent = dynamic(() => import(`../../shared/${componentName}`), {
    ssr: false,
});

核心原因是Webpack的静态分析特性：动态导入的路径不能全是变量，必须包含固定字符串片段，这样它才能在编译时把对应范围内的模块都加入打包列表，运行时才能正确加载。

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