diff --git a/docusaurus/docs/adding-typescript.md b/docusaurus/docs/adding-typescript.md index 15f75a20d4a..fd99f473c28 100644 --- a/docusaurus/docs/adding-typescript.md +++ b/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/). diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 21016b99c69..d834f6bfa58 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/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. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index a68ae8da048..5b70237bf0f 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/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. diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 8c2ec3c5c76..d112c115b4d 100644 --- a/packages/react-scripts/package.json +++ b/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",