VS Code更新后出现TypeScript报错，求助解决方法

更新VS Code后出现TypeScript报错，核心报错信息如下：

ButtonUnstyled.types.d.ts: Module '/components/node_modules/@types/react/index' can only be default-imported using the 'esModuleInterop' flag ts(1259) [Ln 1,Col 8].
index.d.ts[Ln 65, Col 1]: This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.

完整报错JSON：

/* eslint-disable indent */
[{resource: "node_modules/@mui/base/ButtonUnstyled/ButtonUnstyled.types.d.ts",owner: "typescript",code: "1259",severity: 8,message: "Module 'node_modules/@types/react/index' can only be default-imported using the 'esModuleInterop' flag",source: "ts",startLineNumber: 1,startColumn: 8,endLineNumber: 1,endColumn: 13,relatedInformation: [{startLineNumber: 65,startColumn: 1,endLineNumber: 65,endColumn: 16,message: "This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.",resource: "node_modules/@types/react/index.d.ts"}]}, {resource: "node_modules/@mui/base/InputUnstyled/InputUnstyledProps.d.ts",owner: "typescript",code: "1259",severity: 8,message: "Module 'node_modules/@types/react/index' can only be default-imported using the 'esModuleInterop' flag",source: "ts",startLineNumber: 1,startColumn: 8,endLineNumber: 1,endColumn: 13,relatedInformation: [{startLineNumber: 65,startColumn: 1,endLineNumber: 65,endColumn: 16,message: "This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.",resource: "node_modules/@types/react/index.d.ts"}]}, {resource: "node_modules/@mui/base/OptionGroupUnstyled/OptionGroupUnstyled.d.ts",owner: "typescript",code: "1259",severity: 8,message: "Module 'node_modules/@types/react/index' can only be default-imported using the 'esModuleInterop' flag",source: "ts",startLineNumber: 1,startColumn: 8,endLineNumber: 1,endColumn: 13,relatedInformation: [{startLineNumber: 65,startColumn: 1,endLineNumber: 65,endColumn: 16,message: "This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.",resource: "node_modules/@types/react/index.d.ts"}]}, {resource: "node_modules/@mui/base/OptionGroupUnstyled/OptionGroupUnstyledProps.d.ts",owner: "typescript",code: "1259",severity: 8,message: "Module 'node_modules/@types/react/index' can only be default-imported using the 'esModuleInterop' flag",source: "ts",startLineNumber: 1,startColumn: 8,endLineNumber: 1,endColumn: 13,relatedInformation: [{startLineNumber: 65,startColumn: 1,endLineNumber: 65,endColumn: 16,message: "This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.",resource: "node_modules/@types/react/index.d.ts"}]}, {resource: "node_modules/@mui/base/OptionUnstyled/OptionUnstyled.d.ts",owner: "typescript",code: "1259",severity: 8,message: "Module 'node_modules/@types/react/index' can only be default-imported using the 'esModuleInterop' flag",source: "ts",startLineNumber: 1,startColumn: 8,endLineNumber: 1,endColumn: 13,relatedInformation: [{startLineNumber: 65,startColumn: 1,endLineNumber: 65,endColumn: 16,message: "This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.",resource: "node_modules/@types/react/index.d.ts"}]}, {resource: "node_modules/@mui/base/OptionUnstyled/OptionUnstyledProps.d.ts",owner: "typescript",code: "1259",severity: 8,message: "Module 'node_modules/@types/react/index' can only be default-imported using the 'esModuleInterop' flag",source: "ts",startLineNumber: 1,startColumn: 8,endLineNumber: 1,endColumn: 13,relatedInformation: [{startLineNumber: 65,startColumn: 1,endLineNumber: 65,endColumn: 16,message: "This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.",resource: "node_modules/@types/react/index.d.ts"}]}, {resource: "node_modules/@mui/base/SelectUnstyled/useSelect.types.d.ts",owner: "typescript",code: "1259",severity: 8,message: "Module 'node_modules/@types/react/index' can only be default-imported using the 'esModuleInterop' flag",source: "ts",startLineNumber: 1,startColumn: 8,endLineNumber: 1,endColumn: 13,relatedInformation: [{startLineNumber: 65,startColumn: 1,endLineNumber: 65,endColumn: 16,message: "This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.",resource: "node_modules/@types/react/index.d.ts"}]}, {resource: "node_modules/@mui/base/TabPanelUnstyled/TabPanelUnstyledProps.d.ts",owner: "typescript",code: "1259",severity: 8,message: "Module 'node_modules/@types/react/index' can only be default-imported using the 'esModuleInterop' flag",source: "ts",startLineNumber: 1,startColumn: 8,endLineNumber: 1,endColumn: 13,relatedInformation: [{startLineNumber: 65,startColumn: 1,endLineNumber: 65,endColumn: 16,message: "This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.",resource: "node_modules/@types/react/index.d.ts"}]}, {resource: "node_modules/@mui/base/TabsListUnstyled/TabsListUnstyledProps.d.ts",owner: "typescript",code: "1259",severity: 8,message: "Module 'node_modules/@types/react/index' can only be default-imported using the 'esModuleInterop' flag",source: "ts",startLineNumber: 1,startColumn: 8,endLineNumber: 1,endColumn: 13,relatedInformation: [{startLineNumber: 65,startColumn: 1,endLineNumber: 65,endColumn: 16,message: "This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.",resource: "node_modules/@types/react/index.d.ts"}]}, {resource: "node_modules/@mui/base/TabsUnstyled/TabsUnstyledProps.d.ts",owner: "typescript",code: "1259",severity: 8,message: "Module 'node_modules/@types/react/index' can only be default-imported using the 'esModuleInterop' flag",source: "ts",startLineNumber: 1,startColumn: 8,endLineNumber: 1,endColumn: 13,relatedInformation: [{startLineNumber: 65,startColumn: 1,endLineNumber: 65,endColumn: 16,message: "This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.",resource: "node_modules/@types/react/index.d.ts"}]}, {resource: "node_modules/@mui/base/utils/isHostComponent.d.ts",owner: "typescript",code: "1259",severity: 8,message: "Module 'node_modules/@types/react/index' can only be default-imported using the 'esModuleInterop' flag",source: "ts",startLineNumber: 1,startColumn: 8,endLineNumber: 1,endColumn: 13,relatedInformation: [{startLineNumber: 65,startColumn: 1,endLineNumber: 65,endColumn: 16,message: "This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.",resource: "node_modules/@types/react/index.d.ts"}]}, {resource: "node_modules/@mui/utils/chainPropTypes.d.ts",owner: "typescript",code: "1192",severity: 8,message: "Module 'node_modules/@types/prop-types/index' has no default export.",source: "ts",startLineNumber: 1,startColumn: 8,endLineNumber: 1,endColumn: 17}, {resource: "node_modules/@mui/utils/elementAcceptingRef.d.ts",owner: "typescript",code: "1192",severity: 8,message: "Module 'node_modules/@types/prop-types/index' has no default export.",source: "ts",startLineNumber: 1,startColumn: 8,endLineNumber: 1,endColumn: 17}, {resource: "node_modules/@mui/utils/elementTypeAcceptingRef.d.ts",owner: "typescript",code: "1192",severity: 8,message: "Module 'node_modules/@types/prop-types/index' has no default export.",source: "ts",startLineNumber: 1,startColumn: 8,endLineNumber: 1,endColumn: 17}, {resource: "node_modules/@mui/utils/refType.d.ts",owner: "typescript",code: "1192",severity: 8,message: "Module 'node_modules/@types/prop-types/index' has no default export.",source: "ts",startLineNumber: 1,startColumn: 8,endLineNumber: 1,endColumn: 17}, {resource: "node_modules/@types/node/globals.d.ts",owner: "typescript",code: "2403",severity: 8,message: "Subsequent variable declarations must have the same type.  Variable 'AbortSignal' must be of type '{ new (): AbortSignal; prototype: AbortSignal; abort(reason?: any): AbortSignal; timeout(milliseconds: number): AbortSignal; }', but here has type '{ new (): AbortSignal; prototype: AbortSignal; }'.",source: "ts",startLineNumber: 72,startColumn: 13,endLineNumber: 72,endColumn: 24,relatedInformation: [{startLineNumber: 2304,startColumn: 13,endLineNumber: 2304,endColumn: 24,message: "'AbortSignal' was also declared here.",resource: "/Users/user/.vscode/extensions/ms-vscode.vscode-typescript-next-5.1.20230405/node_modules/typescript/lib/lib.dom.d.ts"}]}];

异常现象：

• 打开报错文件（如ButtonUnstyled.types.d.ts）时报错消失，关闭后重新出现
• tsconfig.json中已设置"esModuleInterop": true，但配置未生效

环境版本：

• VS Code：1.77.1
• TypeScript：5.1.0-dev.20230405
• MUI：
  • @mui/icons-material@5.6.0
  • @mui/material@5.6.0
  • @mui/styles@5.6.0
  • @mui/x-date-pickers@5.0.2

1. 确认VS Code使用的tsconfig配置 #

• 检查项目根目录是否存在多个tsconfig*.json文件，避免VS Code自动选择了不符合预期的配置
• 打开命令面板（Ctrl+Shift+P），执行「TypeScript: Select tsconfig.json」，手动指定项目根目录下的目标配置文件

2. 重置TypeScript服务缓存 #

• 打开命令面板，执行「TypeScript: Restart TS Server」重启服务
• 删除项目根目录下的.tsbuildinfo文件（如果存在）
• 关闭VS Code，删除项目的.vscode文件夹（备份后操作），清除本地缓存配置

3. 优化TypeScript编译配置 #

在tsconfig.json中补充以下配置，确保兼容性：

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "module": "ESNext",
    "moduleResolution": "NodeNext",
    "skipLibCheck": true
  }
}

• allowSyntheticDefaultImports配合esModuleInterop，允许默认导入无默认导出的模块
• skipLibCheck跳过库文件类型检查，解决AbortSignal这类全局类型冲突问题

4. 升级依赖版本 #

当前MUI版本（5.6.0）与TypeScript 5.1兼容性不足，执行以下命令升级依赖：

npm update @mui/material @mui/icons-material @mui/styles @mui/x-date-pickers
npm update @types/react @types/prop-types

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