Load users webpack configuration.

packages/core/config/storybook/main.js

@@ -1,36 +1,50 @@
-const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin')
 const { getPaths } = require('@redwoodjs/internal')
 
-const { getStyleLoaders, getSharedPlugins } = require('../webpack.common')
+const { getSharedPlugins } = require('../webpack.common')
 
 module.exports = {
   stories: [`${getPaths().web.src}/**/*.stories.{tsx,jsx,js}`],
   webpackFinal: (storyBookConfig, { configType }) => {
-    const ourWebpackConfig =
-      configType === 'development'
-        ? require('../webpack.development')
-        : require('../webpack.production')
-
-    // Replace Storybook Config's rules:
-    const babelLoader = ourWebpackConfig.module.rules[0].oneOf[2]
-    storyBookConfig.module.rules[0] = babelLoader
-    storyBookConfig.module.rules = [
-      ...storyBookConfig.module.rules,
-      ...getStyleLoaders(configType === 'production'),
-    ]
+    const isEnvProduction = configType === 'production'
 
-    storyBookConfig.resolve.plugins = [
-      new DirectoryNamedWebpackPlugin({
-        honorIndex: true,
-        exclude: /node_modules/,
-      }),
-    ]
+    const ourWebpackConfig = isEnvProduction
+      ? require('../webpack.production')
+      : require('../webpack.development')
+
+    const { mode, bail, devtool, entry, output, optimization } = storyBookConfig
+
+    const newConfig = {
+      ...ourWebpackConfig,
+      mode,
+      bail,
+      devtool,
+      entry,
+      output,
+      optimization,
+    }
 
-    storyBookConfig.plugins = [
+    // ** PLUGINS **
+
+    newConfig.plugins = [
       ...storyBookConfig.plugins,
-      ...getSharedPlugins(configType === 'production'),
+      ...getSharedPlugins(isEnvProduction),
     ]
 
-    return storyBookConfig
+    // ** LOADERS ***
+
+    // Remove null-loader
+    const nullLoaderIndex = newConfig.module.rules[0].oneOf.findIndex(
+      ({ loader }) => loader === 'null-loader'
+    )
+    if (nullLoaderIndex >= 0) {
+      newConfig.module.rules[0].oneOf.splice(nullLoaderIndex, 1)
+    }
+    // Add markdown-loader
+    const mdxModuleRule = storyBookConfig.module.rules.filter(({ test }) => {
+      return '.md'.match(test)
+    })?.[0]
+    newConfig.module.rules[0].oneOf.unshift(mdxModuleRule)
+
+    return newConfig
   },
 }

packages/core/config/webpack.common.js

@@ -169,11 +169,11 @@ module.exports = (webpackEnv) => {
             // (0)
             {
               loader: 'null-loader',
-              test: /\.(md|test\.js|stories\.js)$/,
+              test: /\.(md|test\.*|stories\.*)$/,
             },
             // (1)
             {
-              test: /\.(png|jpg|gif)$/,
+              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
               use: [
                 {
                   loader: 'url-loader',
@@ -186,7 +186,7 @@ module.exports = (webpackEnv) => {
             },
             // (2)
             {
-              test: /\.(js|jsx|ts|tsx)$/,
+              test: /\.(js|mjs|jsx|ts|tsx)$/,
               exclude: /(node_modules)/,
               use: {
                 loader: 'babel-loader',