From db9d9f7f081d3970f87d69af016a767f948be7ba Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Fri, 1 May 2020 15:24:12 +0200
Subject: [PATCH] packages/storybook: use ts-loader for JS too

---
 packages/storybook/.storybook/main.js | 54 +++++++++++++++------------
 packages/storybook/tsconfig.json      |  5 +++
 2 files changed, 36 insertions(+), 23 deletions(-)
 create mode 100644 packages/storybook/tsconfig.json

diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js
index 56c00d533f..d93ff20679 100644
--- a/packages/storybook/.storybook/main.js
+++ b/packages/storybook/.storybook/main.js
@@ -12,36 +12,44 @@ module.exports = {
     'storybook-dark-mode/register',
   ],
   webpackFinal: async config => {
+    const coreSrc = path.resolve(__dirname, '../../core/src');
+
     config.resolve.alias = {
       ...config.resolve.alias,
+      // Point to dist version of theme and any other packages that might be needed in the future
       '@backstage/theme': path.resolve(__dirname, '../../theme'),
     };
-    config.resolve.modules.push(path.resolve(__dirname, '../../core/src'));
-    config.module.rules.push(
-      {
-        test: /\.(ts|tsx)$/,
-        use: [
-          {
-            loader: require.resolve('ts-loader'),
-            options: {
-              transpileOnly: true,
-            },
-          },
-        ],
-      },
-      {
-        test: /\.(js|jsx)$/,
-        loader: 'babel-loader',
-        options: {
-          presets: ['@babel/preset-react'],
-          plugins: ['@babel/plugin-proposal-class-properties'],
-        },
-      },
-    );
+    config.resolve.modules.push(coreSrc);
+
+    // Remove the default babel-loader for js files, we're using ts-loader instead
+    const [jsLoader] = config.module.rules.splice(0, 1);
+    if (jsLoader.use[0].loader !== 'babel-loader') {
+      throw new Error(
+        `Unexpected loader removed from storybook config, ${jsonLoader.use[0].loader}`,
+      );
+    }
+
     config.resolve.extensions.push('.ts', '.tsx');
 
+    // Use ts-loader for all JS/TS files
+    config.module.rules.push({
+      test: /\.(ts|tsx|mjs|js|jsx)$/,
+      include: [__dirname, coreSrc],
+      exclude: /node_modules/,
+      use: [
+        {
+          loader: require.resolve('ts-loader'),
+          options: {
+            transpileOnly: true,
+          },
+        },
+      ],
+    });
+
     // Disable ProgressPlugin which logs verbose webpack build progress. Warnings and Errors are still logged.
-    config.plugins = config.plugins.filter(({ constructor }) => constructor.name !== "ProgressPlugin")
+    config.plugins = config.plugins.filter(
+      ({ constructor }) => constructor.name !== 'ProgressPlugin',
+    );
 
     return config;
   },
diff --git a/packages/storybook/tsconfig.json b/packages/storybook/tsconfig.json
new file mode 100644
index 0000000000..87132f9b4f
--- /dev/null
+++ b/packages/storybook/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": [".storybook/**/*"],
+  "compilerOptions": {}
+}