删除锁文件重装依赖后，出现@mui/icons-material模块找不到问题

问题场景 #

删除node_modules、清理npm缓存、删除yarn.lock/package-lock.json后重新安装依赖，出现报错：

Cannot find module "@mui/icons-material/Close" imported from within one of my node_modules. Did you mean to import @mui/icons-material/Close.js.

已知@mui/icons-material已安装完成，保留原始锁文件时项目运行正常，npm、yarn两种包管理器均尝试过，且确认该包仅安装了一次。技术环境：Next.js + React + TypeScript + Node v16.19.1 + npm v9.5.0 + yarn v1.22.19。

调用栈截图：

可行解决方案 #

1. 调整Next.js模块解析配置 #

Next.js对ES模块的扩展名处理逻辑可能导致无扩展名的导入失败，在next.config.js中添加以下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    esmExternals: false,
  },
  webpack: (config) => {
    config.resolve.extensions.push('.js', '.jsx', '.ts', '.tsx');
    return config;
  },
};

module.exports = nextConfig;

2. 锁定@mui/icons-material版本 #

重新安装时可能拉取了不兼容的新版本，在package.json中指定与原始锁文件一致的版本：

{
  "dependencies": {
    "@mui/icons-material": "^5.11.0" // 替换为原始锁文件中的版本号
  }
}

之后执行npm install或yarn install重新安装依赖。

3. 用兼容模式安装依赖 #

Node.js v16与部分包的ES模块存在兼容性问题，尝试用legacy模式安装：

# npm
npm install --legacy-peer-deps

# yarn
yarn install --legacy-peer-deps

安装前记得清理全局缓存：npm cache clean --force

4. 修正TypeScript配置 #

确保tsconfig.json中模块解析相关配置正确：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true
  }
}

验证步骤 #

修改配置后，删除node_modules和锁文件，重新安装依赖并启动项目，检查报错是否消失。

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