Use Babel to transform JSX instead of TypeScript

.circleci/config.yml

@@ -18,8 +18,13 @@ jobs:
       - run:
           command: |
              pipenv sync --dev
-             npm install --no-save
              pipenv run pip install -r requirements.production.txt
+
+             # This will ensure that 'npm prepare' scripts on dependencies are run.
+             # For more details, see: https://stackoverflow.com/a/52767310
+             npm config set unsafe-perm true
+
+             npm install --no-save
       - save_cache:
           key: tenants2-take2-{{ .Branch }}-{{ checksum "Pipfile.lock" }}-{{ checksum "package-lock.json" }}-{{ checksum "requirements.production.txt" }}
           paths:

frontend/webpack/base.js

@@ -56,6 +56,7 @@ const BUNDLE_FILENAME_TEMPLATE = ENABLE_WEBPACK_CONTENT_HASH
 
 /** @type Partial<TsLoaderOptions> */
 const tsLoaderOptions = {
+  configFile: "tsconfig.build.json",
   /**
    * Without this setting, TypeScript compiles *everything* including
    * files not relevant to the bundle we're building, which often
@@ -68,25 +69,40 @@ const tsLoaderOptions = {
    * only transpile for now. This significantly improves compile speed.
    */
   transpileOnly: true,
-  compilerOptions: {
-    /**
-     * Allow unused locals during development, because it's useful for
-     * tinkering. Our linter will error on them to ensure that CI fails
-     * if code is committed with them.
-     */
-    noUnusedLocals: false
-  }
 };
 
 const baseBabelOptions = {
   babelrc: false,
   plugins: [
+    "@babel/plugin-transform-react-jsx",
     "@babel/plugin-proposal-object-rest-spread",
     "@babel/plugin-syntax-dynamic-import",
     "react-loadable/babel"
   ]
 };
 
+const nodeBabelOptions = {
+  ...baseBabelOptions,
+  presets: [
+    ["@babel/env", {
+      "targets": {
+        "node": "current"
+      }
+    }],
+  ],
+  plugins: [
+    ...baseBabelOptions.plugins,
+    "babel-plugin-dynamic-import-node"
+  ]
+};
+
+exports.nodeBabelOptions = nodeBabelOptions;
+
+const webBabelOptions = {
+  ...baseBabelOptions,
+  presets: ["@babel/preset-env"]
+};
+
 /**
  * Our webpack rule for loading SVGs as React components.
  * 
@@ -152,7 +168,7 @@ function createNodeScriptConfig(entry, filename) {
           test: /\.tsx?$/,
           exclude: /node_modules/,
           use: [
-            { loader: 'babel-loader', options: baseBabelOptions },
+            { loader: 'babel-loader', options: nodeBabelOptions },
             { loader: 'ts-loader', options: tsLoaderOptions },
           ]
         },
@@ -216,13 +232,7 @@ const webConfig = {
         test: /\.tsx?$/,
         exclude: /node_modules/,
         use: [
-          {
-            loader: 'babel-loader',
-            options: {
-              ...baseBabelOptions,
-              presets: ["@babel/preset-env"],
-            }
-          },
+          { loader: 'babel-loader', options: webBabelOptions },
           { loader: 'ts-loader', options: tsLoaderOptions }
         ]
       },

jest.config.js

@@ -1,6 +1,17 @@
 const path = require('path');
+const assert = require('assert');
+
+const { nodeBabelOptions } = require('./frontend/webpack/base');
+
+assert(nodeBabelOptions);
 
 module.exports = {
+  "globals": {
+    "ts-jest": {
+      "babelConfig": nodeBabelOptions,
+      "tsConfig": "tsconfig.build.json"
+    }
+  },
   "testURL": "http://localhost",
   "transform": {
     "^.+\\.tsx?$": "ts-jest"

package.json

@@ -50,10 +50,16 @@
     "enzyme-adapter-react-16": "1.6.0",
     "jest": "24.1.0",
     "react-testing-library": "5.2.3",
-    "ts-jest": "24.0.0",
+    "ts-jest": "https://github.com/kulshekhar/ts-jest#670503f65a79ec62712e5e4488b734c092b20a0f",
     "webpack-bundle-analyzer": "2.13.1"
   },
   "dependencies": {
+    "@babel/core": "7.3.4",
+    "@babel/plugin-proposal-object-rest-spread": "7.3.4",
+    "@babel/plugin-syntax-dynamic-import": "7.2.0",
+    "@babel/plugin-transform-react-jsx": "7.3.0",
+    "@babel/polyfill": "7.2.5",
+    "@babel/preset-env": "7.3.4",
     "@types/cheerio": "0.22.9",
     "@types/classnames": "2.2.6",
     "@types/isomorphic-fetch": "0.0.34",
@@ -69,13 +75,8 @@
     "@types/smoothscroll-polyfill": "0.3.0",
     "@types/source-map-support": "0.4.1",
     "autobind-decorator": "2.1.0",
-    "@babel/core": "7.3.4",
     "babel-loader": "8.0.5",
-    "@babel/plugin-syntax-dynamic-import": "7.2.0",
-    "@babel/plugin-proposal-object-rest-spread": "7.3.4",
-    "@babel/plugin-transform-react-jsx": "7.3.0",
-    "@babel/polyfill": "7.2.5",
-    "@babel/preset-env": "7.3.4",
+    "babel-plugin-dynamic-import-node": "2.2.0",
     "bulma": "0.7.2",
     "cheerio": "1.0.0-rc.2",
     "classnames": "2.2.6",

tsconfig.build.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    /**
+     * Allow unused locals, because it's useful for tinkering. Our linter,
+     * which uses the base tsconfig.json, will error on them to ensure that
+     * CI fails if code is committed with them.
+     */
+    "noUnusedLocals": false,
+
+    /**
+     * We set jsx to "react" in our base tsconfig.json to ensure that our
+     * linter will error if we don't import react in code that uses
+     * JSX. However, in our actual build pipeline, we want to preserve
+     * JSX so we can potentially use Babel plugins that operate on it.
+     */
+    "jsx": "preserve"
+  }
+}

tsconfig.json

@@ -10,6 +10,12 @@
     "frontend/lib/queries/__generated__",
     "findhelp/static/findhelp/vendor",
   ],
+  /**
+   * The following options are the base options that are used for linting.
+   *
+   * See "tsconfig.build.json" for overrides that occur during the build
+   * process.
+   */
   "compilerOptions": {
     /* Basic Options */
 
@@ -20,7 +26,16 @@
     // "lib": [],                             /* Specify library files to be included in the compilation. */
     "allowJs": true,                       /* Allow javascript files to be compiled. */
     "checkJs": true,                       /* Report errors in .js files. */
+
+    /**
+     * We want linting to complain when we don't import React in files that use
+     * JSX syntax, so we'll set "jsx" to "react" here to do that. However,
+     * at build time we want to process JSX natively so we can potentially
+     * apply Babel plugins to it, so we'll change this to "preserve" in
+     * "tsconfig.build.json".
+     */
     "jsx": "react",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+
     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
     // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
     // "sourceMap": true,                     /* Generates corresponding '.map' file. */