feat: add storybook mdx rule to the config

src/common/webpack/config.ts

@@ -636,7 +636,7 @@ function createFallbackRules({isEnvProduction}: HelperOptions) {
             generator: {
                 filename: 'assets/[name].[contenthash:8][ext]',
             },
-            exclude: [/\.[jt]sx?$/, /\.json$/, /\.[cm]js$/, /\.ejs$/],
+            exclude: [/\.[jt]sx?$/, /\.json$/, /\.[cm]js$/, /\.ejs$/, /\.mdx$/],
         },
     ];
 

src/common/webpack/storybook.ts

@@ -10,6 +10,7 @@ import {isLibraryConfig} from '../models';
 import type {HelperOptions} from './config';
 import type {ClientConfig} from '../models';
 import type * as Webpack from 'webpack';
+import {findMdxRuleInConfig} from './utils';
 
 type Mode = `${WebpackMode}`;
 
@@ -32,6 +33,8 @@ export async function configureServiceWebpackConfig(
 
     const webpackConfig = await configureWebpackConfigForStorybook(mode, options);
 
+    const mdxRule = findMdxRuleInConfig(storybookConfig);
+
     return {
         ...storybookConfig,
         plugins: [...(storybookConfig.plugins ?? []), ...webpackConfig.plugins],
@@ -53,7 +56,10 @@ export async function configureServiceWebpackConfig(
         },
         module: {
             ...storybookConfig.module,
-            rules: webpackConfig.module.rules,
+            rules:
+                mdxRule && webpackConfig.module?.rules
+                    ? [mdxRule, ...webpackConfig.module.rules]
+                    : webpackConfig.module.rules,
         },
     };
 }

src/common/webpack/utils.ts

@@ -5,6 +5,8 @@ import {prettyTime} from '../logger/pretty-time';
 import type webpack from 'webpack';
 import type {Logger} from '../logger';
 
+import type * as Webpack from 'webpack';
+
 export function webpackCompilerHandlerFactory(logger: Logger, onCompilationEnd?: () => void) {
     return async (err?: Error | null, stats?: webpack.Stats) => {
         if (err) {
@@ -89,3 +91,17 @@ function readJsonConfig(pathname: string) {
         throw new Error(`Couldn't read config ${pathname}`);
     }
 }
+
+export const findMdxRuleInConfig = (storybookConfig: Webpack.Configuration) => {
+    const mdxRule = storybookConfig.module?.rules?.find((rule) => {
+        const test = (rule as {test: RegExp}).test;
+
+        if (!test) {
+            return false;
+        }
+
+        return test.test('.mdx');
+    });
+
+    return mdxRule;
+};