Material UI + Next.js：无法解析'@/theme'模块问题求助

针对你在使用Material UI + Next.js App Router示例项目时遇到的模块找不到问题，可按以下步骤排查解决：

1. 确认jsconfig.json的别名配置 #

确保jsconfig.json位于项目根目录，且compilerOptions中的路径映射正确：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

注意：如果是TypeScript项目，需使用tsconfig.json而非jsconfig.json。

2. 验证theme文件的位置与导出 #

• 确认theme.js（或theme/index.js）存在于src目录下：
  • 若为单文件，路径应为src/theme.js，且文件内有默认导出：export default theme;
  • 若为文件夹结构，需在src/theme/index.js中导出theme，保证@/theme能正确指向该入口文件

3. 手动配置Webpack别名（兜底方案） #

在next.config.js中添加Webpack别名映射，强制让@指向src目录：

const path = require('path');

const nextConfig = {
  webpack: (config) => {
    config.resolve.alias['@'] = path.resolve(__dirname, 'src');
    return config;
  },
};

module.exports = nextConfig;

4. 检查文件名细节 #

• 确认文件名大小写与导入路径一致（Linux/macOS环境下文件名大小写敏感）
• 尝试明确指定扩展名导入，例如：import theme from '@/theme.js';

5. 清除Next.js缓存 #

运行以下命令清除缓存后重启开发服务器：

npx next clean
npm run dev

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