tooling: Replaces awesome ts loader with babel loader

Author: MrTibbles

.babelrc

@@ -1,22 +1,21 @@
 {
+  "presets": [
+    "@babel/typescript",
+    "@babel/react",
+    "linaria/babel",
+    [
+      "@babel/env",
+      {
+        "useBuiltIns": "usage",
+        "corejs": "3",
+        "targets": {
+          "esmodules": true
+        }
+      }
+    ]
+  ],
+  // "plugins": ["@babel/plugin-syntax-dynamic-import"],
   "env": {
-    "development": {
-      "presets": [
-        "@babel/preset-typescript",
-        [
-          "@babel/preset-env",
-          {
-            "useBuiltIns": "entry",
-            "corejs": "3",
-            "targets": {
-              "esmodules": true
-            }
-          }
-        ],
-        "@babel/preset-react",
-        "linaria/babel"
-      ]
-    },
     "production": {
       "plugins": [
         ["react-remove-properties", { "properties": ["data-testid"] }]

package-lock.json

@@ -18,6 +18,7 @@
   "license": "ISC",
   "devDependencies": {
     "@babel/core": "^7.5.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/preset-env": "^7.5.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
@@ -27,7 +28,7 @@
     "@types/react-router-dom": "^4.3.4",
     "@typescript-eslint/eslint-plugin": "^2.0.0",
     "@typescript-eslint/parser": "^2.0.0",
-    "awesome-typescript-loader": "^5.2.1",
+    "babel-loader": "^8.0.6",
     "babel-plugin-react-remove-properties": "^0.3.0",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.0.4",
@@ -75,6 +76,7 @@
   "scripts": {
     "dev:client": "webpack-dev-server",
     "dev:server": "node src/server/index.js",
+    "dev:type-check": "tsc --noEmit --watch",
     "lint:styles": "stylelint \"src/client/**/*.js\"",
     "lint:prettier": "prettier --write \"src/**/*.{js,ts,tsx}\"",
     "lint:eslint": "eslint --fix \"src/**/*.{js,ts,tsx}\"",
@@ -87,7 +89,7 @@
     "cy:open": "cypress open --env API_URL=http://localhost:4000",
     "cy:verify": "cypress verify",
     "ci:serve": "CI_ENV=true now dev",
-    "build": "webpack --env.production",
+    "build": "tsc --noEmit && webpack --env.production",
     "test": "cypress run --record --key f8b075fe-ce9f-4712-ad42-96c913b58cf6 --env API_URL=http://localhost:4000/",
     "test:ci": "cypress run --record --key f8b075fe-ce9f-4712-ad42-96c913b58cf6 --env API_URL=http://localhost:3000/graphql"
   },

package.json

@@ -31,7 +31,7 @@ function useGraphQLAPI<T>(): [NetworkState<T>, SubmitQueryFn] {
     });
   }
 
-  async function handleResponse(res?: Response): Promise<void> {
+  async function handleResponse(res: Response): Promise<void> {
     if (!res || !res.ok) {
       const errorMsg: string = res ? res.statusText : "No network connection";
 
@@ -62,7 +62,7 @@ function useGraphQLAPI<T>(): [NetworkState<T>, SubmitQueryFn] {
       method: "POST"
     })
       .catch(console.warn)
-      .then(handleResponse);
+      .then(res => res && handleResponse(res));
   }
 
   return [networkState, submitQuery];

src/client/hooks/useGraphQLAPI.ts

@@ -1,8 +1,11 @@
 {
     "compilerOptions": {
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
         "outDir": "./dist/",
-        "sourceMap": true,
         "strictNullChecks": true,
+        "sourceMap": true,
+        "strict": true,
         "module": "ESNext",
         "jsx": "react",
         "target": "ESNext",

tsconfig.json

@@ -47,7 +47,7 @@ module.exports = (env = {}) => {
           exclude: /node_modules/,
           use: [
             {
-              loader: "awesome-typescript-loader"
+              loader: "babel-loader",
             },
             {
               loader: "linaria/loader",
@@ -114,6 +114,11 @@ module.exports = (env = {}) => {
         }
       ]),
       new GenerateSW()
-    ]
+    ],
+    optimization: {
+      splitChunks: {
+        chunks: "all"
+      }
+    }
   };
 };