Docs: Disable Markdown transclusion and support ?raw .md files

MIGRATION.md

@@ -15,6 +15,7 @@
     - [Stories glob matches MDX files](#stories-glob-matches-mdx-files)
     - [Add strict mode](#add-strict-mode)
     - [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
+    - [Importing plain markdown files with `transcludeMarkdown` has changed](#importing-plain-markdown-files-with-transcludemarkdown-has-changed)
     - [7.0 feature flags removed](#70-feature-flags-removed)
   - [Core addons](#core-addons)
     - [Removed auto injection of @storybook/addon-actions decorator](#removed-auto-injection-of-storybookaddon-actions-decorator)
@@ -542,6 +543,21 @@ npx sb@next babelrc
 
 This will create a `.babelrc.json` file. This file includes a bunch of babel plugins, so you may need to add new package devDependencies accordingly.
 
+#### Importing plain markdown files with `transcludeMarkdown` has changed
+
+The `transcludeMarkdown` option in `addon-docs` have been removed, and the automatic handling of `.md` files in Vite projects have also been disabled.
+
+Instead `.md` files can be imported as plain strings by adding the `?raw` suffix to the import. In an MDX file that would look like this:
+
+```
+import ReadMe from './README.md?raw';
+
+...
+
+{ReadMe}
+
+```
+
 #### 7.0 feature flags removed
 
 Storybook uses temporary feature flags to opt-in to future breaking changes or opt-in to legacy behaviors. For example:

code/addons/docs/src/preset.ts

@@ -27,7 +27,6 @@ async function webpack(
     /** @deprecated */
     sourceLoaderOptions: any;
     csfPluginOptions: CsfPluginOptions | null;
-    transcludeMarkdown: boolean;
     jsxOptions?: JSXOptions;
   } /* & Parameters<
       typeof createCompiler
@@ -40,7 +39,6 @@ async function webpack(
   const {
     csfPluginOptions = {},
     jsxOptions = {},
-    transcludeMarkdown = false,
     sourceLoaderOptions = null,
     configureJsx,
     mdxBabelOptions,
@@ -82,22 +80,6 @@ async function webpack(
     ? require.resolve('@storybook/mdx1-csf/loader')
     : require.resolve('@storybook/mdx2-csf/loader');
 
-  let rules = module.rules || [];
-  if (transcludeMarkdown) {
-    rules = [
-      ...rules.filter((rule: any) => rule.test?.toString() !== '/\\.md$/'),
-      {
-        test: /\.md$/,
-        use: [
-          {
-            loader: mdxLoader,
-            options: mdxLoaderOptions,
-          },
-        ],
-      },
-    ];
-  }
-
   const result = {
     ...webpackConfig,
     plugins: [
@@ -109,7 +91,7 @@ async function webpack(
     module: {
       ...module,
       rules: [
-        ...rules,
+        ...module.rules,
         {
           test: /(stories|story)\.mdx$/,
           use: [

code/lib/builder-vite/src/plugins/mdx-plugin.ts

@@ -13,7 +13,7 @@ const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith
  * @see https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-arbitrary-mdx
  */
 export async function mdxPlugin(options: Options): Promise<Plugin> {
-  const include = /\.mdx?$/;
+  const include = /\.mdx$/;
   const filter = createFilter(include);
   const addons = await options.presets.apply<StorybookConfig['addons']>('addons', []);
   const docsOptions =

code/lib/builder-webpack5/src/preview/base-webpack.config.ts

@@ -74,6 +74,13 @@ export async function createDefaultWebpackConfig(
               : 'static/media/[path][name][ext]',
           },
         },
+        {
+          // any imports from './some-file.md?raw' will be imported as raw string
+          // see https://webpack.js.org/guides/asset-modules/#replacing-inline-loader-syntax
+          // used to support import raw .md files in MDX
+          resourceQuery: /raw/,
+          type: 'asset/source',
+        },
       ],
     },
     resolve: {

code/lib/core-server/src/__for-testing__/main.ts

@@ -14,7 +14,6 @@ const config: StorybookConfig = {
     {
       name: '@storybook/addon-docs',
       options: {
-        transcludeMarkdown: true,
         sourceLoaderOptions: null,
       },
     },