当 node_module package 具有类型导入时，Nextjs 构建失败并检查类型的有效性

Question

NextJS 13 项目 package 具有内部核心依赖项 (react-leaflet->@react-leaflet/core)。

yarn run build Build 在“Linting 和检查类型的有效性”上失败

似乎是一些 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"
  ]
}

期待yarn run build编译成功

问题解决：

使用yarn upgrade --latest升级typescript版本解决。

Answer 1

linter 不希望看到两个没有逗号的单词。

除此之外，没有必要写'type'，可以导入类型而无需在前面声明'type'。 NextJS 将对您的应用进行 treeshake，并且只编译需要存在的代码。 你不必为此担心。

这种依赖可能是在没有考虑像 Next 这样的框架的情况下产生的。

尝试修改 node_modules 中的文件并删除类型声明：

import React, {MutableRefNode, ReactNode} from react;

我建议在 packagespackage 的 GitHub 上打开一个问题/讨论。也就是说，除非你能找到已经在谈论你面临的问题的人。

Answer 2

linter 不希望看到两个没有逗号的单词。

除此之外，不必写'type'，您可以导入类型而无需在前面声明'type'。 在这种情况下，它会破坏您的开发流程。 NextJS 将对您的应用进行 treeshake，并且只编译需要存在的代码。 你不必为此担心。

试试这个： import React, {MutableRefNode, ReactNode} from react;

如果你真的想声明类型，即使没有必要； 我建议在 NextJS GitHub 上打开一个问题/讨论。也就是说，除非你能找到已经在谈论你面临的问题的人。

Answer 3

使用yarn upgrade --latest升级typescript版本解决。

该问题是从NextJS 11迁移后引起的

已解决 package.json：

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