React PrimeReact项目编译报找不到utils/ClassNames.js模块错误如何修复？

错误原因 #

你项目中的导入路径配置出错，编译器无法定位到你自己编写的ClassNames.js文件。

修复方案（三选一即可） #

方案1：改用相对路径导入 #

首先确认两个文件的存放位置：

• 你的AcctgTrans2.js存放在src/components/目录下
• 你写的ClassNames.js如果存放在src/utils/目录下，将导入语句修改为：

import { classNames } from '../utils/ClassNames.js';

../代表退回到当前文件的上一级目录（即src/目录），再匹配utils/ClassNames.js路径即可定位到文件。

方案2：配置绝对路径别名 #

如果你想保留utils/ClassNames.js的短路径导入写法，可配置项目路径别名：
在项目根目录新建/修改jsconfig.json文件，填入以下内容：

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

配置完成后重启开发服务，编译器会自动从src/目录开始匹配导入路径，原导入语句就可以正常使用。

方案3：直接使用PrimeReact自带的classNames工具 #

你不需要自己复制维护classNames代码，PrimeReact官方已经内置了该工具，直接修改导入语句为：

import { classNames } from 'primereact/utils';

即可直接使用，无需额外引入自己写的ClassNames.js文件。

额外注意：请确认你的文件名大小写和导入语句一致，避免Windows开发环境大小写不敏感、部署到Linux服务器后再次出现路径错误

内容的提问来源于stack exchange，提问作者Đỗ Như Vỹ