[英]How to solve the problem with types in NextJs (Typescript)?
I am using Next.js with TypeScript and want to use the skipLibCheck = false
property for additional checking.我将 Next.js 与 TypeScript 一起使用,并希望使用skipLibCheck = false
属性进行额外检查。 But because of this additional check, the build breaks, due to the following error.但是由于这个额外的检查,构建由于以下错误而中断。
Error错误
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 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 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"]
}
I have already tried updating to the latest version and downgrading the dependencies of @types/react
and @types/react-dom
.我已经尝试更新到最新版本并降级@types/react
和@types/react-dom
的依赖项。 Changed the typescript target ECMAscript version to es6
and esnext
in the config.将配置中的 typescript 目标 ECMAscript 版本更改为es6
和esnext
。 But nothing helps.但没有任何帮助。
Just ran into the same problem.刚遇到同样的问题。 This helped me. 这对我有帮助。 Add this to your next.config.js:将其添加到您的 next.config.js 中:
module.exports = {
typescript: {
ignoreBuildErrors: true,
},
}
Now the build will pass.现在构建将通过。 This was helpful as I'm currently migrating a project over to TS, and while only some of the codebase is in TS, I am getting (acceptable) errors, that I don't want to break my build.这很有帮助,因为我目前正在将一个项目迁移到 TS,虽然只有一些代码库在 TS 中,但我收到(可接受的)错误,我不想破坏我的构建。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.