How to solve the problem with types in NextJs (Typescript)?

Question

I am using Next.js with TypeScript and want to use the skipLibCheck = false property for additional checking. 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

{
  "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"]
}

I have already tried updating to the latest version and downgrading the dependencies of @types/react and @types/react-dom . Changed the typescript target ECMAscript version to es6 and esnext in the config. But nothing helps.

Answer 1

Just ran into the same problem. This helped me. Add this to your 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.