如何解决 NextJs (Typescript) 中的类型问题？答案

【问题标题】：How to solve the problem with types in NextJs (Typescript)?如何解决 NextJs (Typescript) 中的类型问题？
【发布时间】：2021-10-26 17:45:58
【问题描述】：

我正在使用带有 TypeScript 的 Next.js，并希望使用 skipLibCheck = false 属性进行额外检查。但是由于这个额外的检查，构建中断，由于以下错误。

错误

info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
Failed to compile.

./node_modules/next/types/index.d.ts:46:5
Type error: Subsequent property declarations must have the same type.  Property 'loading' must be of type '"eager" | "lazy" | undefined', but here has type '"auto" | "eager" | "lazy" | un
defined'.

  44 |   // <img loading="lazy"> support
  45 |   interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
> 46 |     loading?: 'auto' | 'eager' | 'lazy'
     |     ^
  47 |   }
  48 | }
  49 | 
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

package.json

{
  "name": "my project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "classnames": "^2.3.1",
    "emailjs-com": "^3.2.0",
    "next": "11.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "sass": "^1.39.2"
  },
  "devDependencies": {
    "@types/react": "^17.0.33",
    "@types/react-dom": "^17.0.10",
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.2",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "prettier": "2.4.0",
    "typescript": "4.4.3"
  }
}

tsconfig.json

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

我已经尝试更新到最新版本并降级 @types/react 和 @types/react-dom 的依赖项。在配置中将 typescript 目标 ECMAscript 版本更改为 es6 和 esnext。但没有任何帮助。

【问题讨论】：

在github.com/vercel/next.js/issues 上创建问题我认为在 SO 上我们无能为力。
地址在这里 - github.com/vercel/next.js/issues/29071

标签： javascript reactjs typescript next.js

【解决方案1】：

刚刚遇到了同样的问题。 This 帮助了我。将此添加到您的 next.config.js：

module.exports = {
  typescript: {
    ignoreBuildErrors: true,
  },
}

现在构建将通过。这很有帮助，因为我目前正在将项目迁移到 TS，虽然只有一些代码库在 TS 中，但我遇到了（可接受的）错误，我不想破坏我的构建。

【讨论】：