use tsloader

Author: jpavon

config/webpack.config.dev.js

@@ -21,8 +21,8 @@ const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent')
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
 
-const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
-const TsCheckerWebpackPlugin = require('ts-checker-webpack-plugin');
+// const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 
 // Webpack uses `publicPath` to determine where the app is being served from.
@@ -267,24 +267,18 @@ module.exports = {
               },
             ],
           },
-
           // Compile .tsx
           {
-            test: /\.(ts|tsx)$/,
-            include: paths.appSrc,
-            use: [
-              {
-                loader: require.resolve('awesome-typescript-loader'),
-                options: {
-                  // disable type checker - we will use it in fork plugin
-                  useCache: true,
-                  reportFiles: [
-                    paths.appSrc + '/**/*.{ts,tsx}'
-                  ],
-                  forceIsolatedModules: true
-                },
-              },
-            ],
+            test: /\.tsx?$/,
+            include: paths.srcPaths,
+            exclude: [/[/\\\\]node_modules[/\\\\]/],
+            use: [{
+              loader: require.resolve('ts-loader'),
+              options: {
+                // disable type checker - we will use it in fork plugin
+                transpileOnly: true
+              }
+            }]
           },
           // "postcss" loader applies autoprefixer to our CSS.
           // "css" loader resolves paths in CSS and adds assets as dependencies.
@@ -393,11 +387,11 @@ module.exports = {
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
     // You can remove this if you don't use Moment.js:
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-    new TsCheckerWebpackPlugin({
+    new ForkTsCheckerWebpackPlugin({
       tsconfig: paths.appTsConfig,
       tslint: paths.appTsLint,
     }),
-    new HardSourceWebpackPlugin()
+    // new HardSourceWebpackPlugin()
   ],
   // 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.

config/webpack.config.prod.js

@@ -292,20 +292,18 @@ module.exports = {
               },
             ],
           },
-          // Compile .tsx?
+          // Compile .tsx
           {
-            test: /\.(ts|tsx)$/,
-            include: paths.appSrc,
-            use: [
-              {
-                loader: require.resolve('awesome-typescript-loader'),
-                options: {
-                  reportFiles: [
-                    paths.appSrc + '/**/*.{ts,tsx}'
-                  ],
-                },
-              },
-            ],
+            test: /\.tsx?$/,
+            include: paths.srcPaths,
+            exclude: [/[/\\\\]node_modules[/\\\\]/],
+            use: [{
+              loader: require.resolve('ts-loader'),
+              options: {
+                // enable type checker
+                transpileOnly: false
+              }
+            }]
           },
           // The notation here is somewhat confusing.
           // "postcss" loader applies autoprefixer to our CSS.

package.json

@@ -47,6 +47,7 @@
     "eslint-plugin-jsx-a11y": "6.0.3",
     "eslint-plugin-react": "7.8.2",
     "file-loader": "1.1.11",
+    "fork-ts-checker-webpack-plugin": "^0.4.2",
     "fs-extra": "5.0.0",
     "graphql": "0.13.2",
     "graphql-tag": "2.9.2",
@@ -72,15 +73,16 @@
     "sw-precache-webpack-plugin": "0.11.5",
     "thread-loader": "1.1.5",
     "ts-checker-webpack-plugin": "^0.3.0",
+    "ts-loader": "^4.4.1",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
     "tslint": "^5.10.0",
     "tslint-config-prettier": "^1.13.0",
     "tslint-react": "^3.6.0",
     "typescript": "^2.9.2",
     "uglifyjs-webpack-plugin": "1.2.5",
     "url-loader": "1.0.1",
-    "webpack": "4.8.3",
-    "webpack-dev-server": "3.1.4",
+    "webpack": "^4.12.0",
+    "webpack-dev-server": "^3.1.4",
     "webpack-manifest-plugin": "2.0.2",
     "whatwg-fetch": "2.0.4"
   },

scripts/start.js

@@ -23,10 +23,10 @@ process.on('unhandledRejection', err => {
 require('../config/env');
 // @remove-on-eject-begin
 // Do the preflight check (only happens before eject).
-const verifyPackageTree = require('./utils/verifyPackageTree');
-if (process.env.SKIP_PREFLIGHT_CHECK !== 'true') {
-  verifyPackageTree();
-}
+// const verifyPackageTree = require('./utils/verifyPackageTree');
+// if (process.env.SKIP_PREFLIGHT_CHECK !== 'true') {
+//   verifyPackageTree();
+// }
 // @remove-on-eject-end
 
 const chalk = require('chalk');