VS Code中Next.js 13项目MUI自动导入无提示问题求助

问题描述 #

在已安装MUI的Next.js 13项目中，VS Code无法提供@mui/material库的自动导入提示，但项目内其他库的自动导入功能正常，且非Next.js 13项目中MUI的自动导入可正常工作。当前项目的tsconfig.json配置如下：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

解决方案 #

尝试以下步骤逐步排查修复：

• 切换VS Code使用工作区的TypeScript版本：点击底部状态栏的TypeScript版本标识，选择Use Workspace Version，确保使用项目依赖中的TypeScript而非VS Code内置版本。
• 调整tsconfig.json的模块解析配置：Next.js 13.4+推荐使用bundler策略，修改compilerOptions中的moduleResolution为bundler。
• 重启VS Code的TypeScript服务：按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），执行TypeScript: Restart TS Server清除服务缓存。
• 检查VS Code自动导入设置：打开设置面板，确认typescript.suggest.autoImports和javascript.suggest.autoImports均设为true。
• 重新安装MUI依赖：执行npm install @mui/material @emotion/react @emotion/styled确保依赖完整。
• 临时关闭skipLibCheck测试：将tsconfig.json中的skipLibCheck改为false，排查是否是类型检查跳过导致的问题，解决后可改回true。

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