TypeScript errors due to missing @types/react-dom and @types/webpack when using `"strict": true` and `"skipLibCheck": false`

Bug report

Describe the bug

When setting tsconfig.json options "skipLibCheck": false and "strict": true, TypeScript errors are raised due to missing dependencies @types/react-dom and @types/webpack.

As a workaround, a Next.js project can declare these as dependencies in package.json, but this shouldn’t be necessary.

To Reproduce

First, initialize a Next.js app with TypeScript:

$ npx create-next-app@9.5.2 my-app
...
$ cd my-app
$ touch tsconfig.json
$ npm run build

> my-app@0.1.0 build /Users/spencerelliott/Dev/elliottsj/my-app
> next build

It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install typescript, @types/react, and @types/node by running:

	npm install --save-dev typescript @types/react @types/node

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).

$ npm install --save-dev typescript @types/react @types/node
$ npm run build
... (success)

Then edit tsconfig.json: set "strict": true and "skipLibCheck": false. Try building again:

$ npm run build

> my-app@0.1.0 build /Users/spencerelliott/Dev/elliottsj/my-app
> next build

Failed to compile.

./node_modules/next/types/index.d.ts:3:23
Type error: Cannot find type definition file for 'react-dom'.

  1 | /// <reference types="node" />
  2 | /// <reference types="react" />
> 3 | /// <reference types="react-dom" />
    |                       ^
  4 |
  5 | import React from 'react'
  6 | import { ParsedUrlQuery } from 'querystring'

Install @types/react-dom as a workaround and this error is resolved, but there’s a new error:

$ npm install --save-dev @types/react-dom
...
$ npm run build

> my-app@0.1.0 build /Users/spencerelliott/Dev/elliottsj/my-app
> next build

Failed to compile.

./node_modules/next/dist/build/webpack/plugins/pages-manifest-plugin.d.ts:1:34
Type error: Could not find a declaration file for module 'webpack'. '/Users/spencerelliott/Dev/elliottsj/my-app/node_modules/webpack/lib/webpack.js' implicitly has an 'any' type.
  Try `npm install @types/webpack` if it exists or add a new declaration (.d.ts) file containing `declare module 'webpack';`

> 1 | import { Compiler, Plugin } from 'webpack';
    |                                  ^
  2 | export declare type PagesManifest = {
  3 |     [page: string]: string;
  4 | };

Install @types/webpack, then we get a successful build:

$ npm install --save-dev @types/webpack
...
$ npm run build

> my-app@0.1.0 build /Users/spencerelliott/Dev/elliottsj/my-app
> next build

info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data
info  - Generating static pages (2/2)
info  - Finalizing page optimization

Page                                                           Size     First Load JS
┌ ○ /                                                          3.42 kB        61.1 kB
├   └ css/a181cbd139209b03ddcc.css                             716 B
├   /_app                                                      0 B            57.7 kB
├ ○ /404                                                       3.45 kB        61.2 kB
└ λ /api/hello                                                 0 B            57.7 kB
+ First Load JS shared by all                                  57.7 kB
  ├ chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.e68a13.js  10 kB
  ├ chunks/framework.085e84.js                                 40 kB
  ├ chunks/main.270a02.js                                      6.69 kB
  ├ chunks/pages/_app.81bed2.js                                281 B
  ├ chunks/webpack.ccf5ab.js                                   751 B
  └ css/a7d1b6e4789f5d2be852.css                               202 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

Redirects

┌ source: /:path+/
├ destination: /:path+
└ permanent: true

Expected behavior

The Next.js app should build successfully without having to install @types/react-dom and @types/webpack.

System information

• OS: macOS
• Version of Next.js: 9.5.2
• Version of Node.js: 14.8.0

[joshmanders]

Any updates on this? I’m getting same error and find it weird that I have to have types available to build in production.

[AshConnolly]

For others my solution was to install all packages, but prune dev dependencies after build like so:

npm ci 

npm run build 

npm prune --production 

npm run start

It works fine, but it It would be better if this error didn’t occur and we could just do npm ci --production followed by build, without the error occurring.