Next.js项目移动components文件夹后执行npm run build报ModuleNotFoundError求助

报错原因 #

你将components文件夹从pages目录移动到项目根目录后，原有代码中的相对导入路径和当前目录结构不匹配，导致构建时无法定位到组件文件。

解决方案 #

方案1：调整对应文件的相对导入路径 #

按照你当前的目录结构修改引用路径：

• 若引用ProductImages的页面文件直接存放在pages根目录下，将导入语句改为：

import ProductImages from '../components/ProductImages'

• 若引用文件存放在pages的子目录（例如pages/product/detail.js），根据子目录层级增加../的数量，比如一级子目录需要改为：

import ProductImages from '../../components/ProductImages'

方案2：配置绝对路径导入（推荐，一劳永逸） #

不用频繁调整相对路径，后续所有组件导入都不受文件层级影响：

1. 在项目根目录新建jsconfig.json文件（TS项目新建tsconfig.json，如果已有该文件直接修改compilerOptions即可），写入以下配置：

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

2. 将所有引用components的导入语句统一改为绝对路径写法：

import ProductImages from 'components/ProductImages'

通用排查步骤 #

如果修改路径后仍有报错，先执行以下操作：

• 核对components目录下是否存在ProductImages文件，注意文件名大小写匹配
• 删除项目根目录下的.next缓存文件夹，重新执行npm run build

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