[WIP] TypeScript final touches

docusaurus/docs/adding-typescript.md

@@ -9,7 +9,7 @@ Recent versions of [TypeScript](https://www.typescriptlang.org/) work with Creat
 
 To add TypeScript to a Create React App project, follow these steps:
 
-1. Run `npm install --save typescript fork-ts-checker-webpack-plugin @types/react @types/react-dom @types/jest` (or `yarn add typescript fork-ts-checker-webpack-plugin @types/react @types/react-dom @types/jest`).
+1. Run `npm install --save typescript @types/react @types/react-dom @types/jest` (or `yarn add typescript @types/react @types/react-dom @types/jest`).
 2. Rename the `.js` files you want to convert. Use `.tsx` if they use JSX or `.ts` if not (e.g. `git mv src/index.js src/index.tsx`).
 
 3. Create a [`tsconfig.json` file](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) at the root directory with the following content:
@@ -38,8 +38,6 @@ To add TypeScript to a Create React App project, follow these steps:
 
 Type errors will show up in the same console as the build one.
 
-> Note: If you prefer to run type checking separately from the build process, you can run `npm uninstall fork-ts-checker-webpack-plugin` (or `yarn remove fork-ts-checker-webpack-plugin`) to remove the `fork-ts-checker-webpack-plugin` dependency and then `npx tsc -w` on a new terminal tab.
-
 We recommend using [VSCode](https://code.visualstudio.com/) for a better integrated experience.
 
 To learn more about TypeScript, check out [its documentation](https://www.typescriptlang.org/).

packages/react-scripts/config/webpack.config.dev.js

@@ -10,8 +10,8 @@
 
 const fs = require('fs');
 const path = require('path');
-const resolve = require('resolve');
 const webpack = require('webpack');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const PnpWebpackPlugin = require('pnp-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
@@ -410,27 +410,12 @@ module.exports = {
     }),
     // TypeScript type checking
     fs.existsSync(paths.appTsConfig) &&
-      (() => {
-        let ForkTsCheckerWebpackPlugin;
-        try {
-          ForkTsCheckerWebpackPlugin = require(resolve.sync(
-            'fork-ts-checker-webpack-plugin',
-            { basedir: paths.appNodeModules }
-          ));
-        } catch (e) {
-          // Fail silently.
-          // Type checking using this plugin is optional.
-          // The user may decide to install `fork-ts-checker-webpack-plugin` or use `tsc -w`.
-          return null;
-        }
-
-        return new ForkTsCheckerWebpackPlugin({
-          async: false,
-          checkSyntacticErrors: true,
-          tsconfig: paths.appTsConfig,
-          watch: paths.appSrc,
-        });
-      })(),
+      new ForkTsCheckerWebpackPlugin({
+        async: false,
+        checkSyntacticErrors: true,
+        tsconfig: paths.appTsConfig,
+        watch: paths.appSrc,
+      }),
   ].filter(Boolean),
 
   // Some libraries import Node modules but don't use them in the browser.

packages/react-scripts/config/webpack.config.prod.js

@@ -11,7 +11,7 @@
 const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
-const resolve = require('resolve');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const PnpWebpackPlugin = require('pnp-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
@@ -530,27 +530,12 @@ module.exports = {
     }),
     // TypeScript type checking
     fs.existsSync(paths.appTsConfig) &&
-      (() => {
-        let ForkTsCheckerWebpackPlugin;
-        try {
-          ForkTsCheckerWebpackPlugin = require(resolve.sync(
-            'fork-ts-checker-webpack-plugin',
-            { basedir: paths.appNodeModules }
-          ));
-        } catch (e) {
-          // Fail silently.
-          // Type checking using this plugin is optional.
-          // The user may decide to install `fork-ts-checker-webpack-plugin` or use `tsc -w`.
-          return null;
-        }
-
-        return new ForkTsCheckerWebpackPlugin({
-          async: false,
-          checkSyntacticErrors: true,
-          tsconfig: paths.appTsConfig,
-          watch: paths.appSrc,
-        });
-      })(),
+      new ForkTsCheckerWebpackPlugin({
+        async: false,
+        checkSyntacticErrors: true,
+        tsconfig: paths.appTsConfig,
+        watch: paths.appSrc,
+      }),
   ].filter(Boolean),
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.

packages/react-scripts/package.json

@@ -43,6 +43,7 @@
     "eslint-plugin-jsx-a11y": "6.1.2",
     "eslint-plugin-react": "7.11.1",
     "file-loader": "2.0.0",
+    "fork-ts-checker-webpack-plugin": "0.4.10",
     "fs-extra": "7.0.0",
     "html-webpack-plugin": "4.0.0-alpha.2",
     "identity-obj-proxy": "3.0.0",