packages/storybook: use ts-loader for JS too

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;
   },

packages/storybook/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": [".storybook/**/*"],
+  "compilerOptions": {}
+}