NextJS 13构建因依赖类型导入兼容问题失败及解决

我在NextJS 13项目中使用react-leaflet（内部依赖@react-leaflet/core），执行yarn run build时，在**"Linting and checking validity of types"**阶段构建失败，经排查是当前TypeScript版本不支持import {type MyType}语法导致的兼容性问题。

项目配置 #

package.json #

{
  "dependencies": {
    "next": "^13.0.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-leaflet": "^4.2.0",
    "leaflet": "^1.9.3"
  },
  "devDependencies": {
    "@types/leaflet": "^1.9.0",
    "@types/node": "18.11.17",
    "@types/react": "17.0.20",
    "eslint": "7.32.0",
    "eslint-config-next": "^13.0.7",
    "typescript": "4.4.2"
  }
}

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
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

解决方案 #

执行以下命令升级TypeScript到最新版本，即可解决构建失败问题：

yarn upgrade --latest

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