Always type check TypeScript when being used (#5515)

* Always type check TypeScript when being used

* Use alternate version

docusaurus/docs/adding-typescript.md

@@ -5,12 +5,12 @@ title: Adding TypeScript
 
 TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
 
-Recent versions of [TypeScript](https://www.typescriptlang.org/) work with Create React App projects out of the box thanks to Babel 7. Beware that Babel 7 TypeScript does not allow some features of TypeScript such as constant enum and namespaces.
+Recent versions of [TypeScript](https://www.typescriptlang.org/) work with Create React App projects out of the box thanks to Babel 7. Note that Babel 7 TypeScript does not allow some features of TypeScript such as constant enum and namespaces.
 
 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`).
-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`).
+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

@@ -23,6 +23,7 @@ const getClientEnvironment = require('./env');
 const paths = require('./paths');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
 // @remove-on-eject-begin
 const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
 // @remove-on-eject-end
@@ -410,27 +411,15 @@ 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({
+        typescript: resolve.sync('typescript', {
+          basedir: paths.appNodeModules,
+        }),
+        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

@@ -27,6 +27,7 @@ const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent')
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
 // @remove-on-eject-begin
 const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
 // @remove-on-eject-end
@@ -530,27 +531,15 @@ 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({
+        typescript: resolve.sync('typescript', {
+          basedir: paths.appNodeModules,
+        }),
+        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-alt": "0.4.10",
     "fs-extra": "7.0.0",
     "html-webpack-plugin": "4.0.0-alpha.2",
     "identity-obj-proxy": "3.0.0",