Transclude Markdown from @storybook/addon-docs doesn't work

[openscript]

Thank you @eirslett for your great work!

In my storybook I want to render the README.md as the starting page. So I have the following Start.stories.mdx:

import { Meta, Description } from '@storybook/addon-docs';
import Readme from '../README.md';

<Meta title="Start" parameters={{ previewTabs: { canvas: { hidden: true } } }} />

<Readme />

This works well, when I use the built in builder:

module.exports = {
  stories: [
    "../stories/Start.stories.mdx",
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
        transcludeMarkdown: true
      },
    },
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-storysource"
  ]
}

When I switch to storybook-builder-vite the README.md isn't rendered:

module.exports = {
  stories: [
    "../stories/Start.stories.mdx",
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
        transcludeMarkdown: true
      },
    },
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-storysource"
  ],
  core: {
    "builder": "storybook-builder-vite"
  }
}

There are several runtime errors in the console. This issue can be reproduced with this branch:

1. yarn install
2. yarn start

[RussMax783]

Could possibly be related to this: https://github.com/storybookjs/storybook/issues/15879

[IanVS]

@openscript, what version of storybook are you using?

[openscript]

Version 6.3.10

[joshwooding]

@openscript This is currently working for me with the current react example. I added a README and was able to import it into a mdx story. I could get your branch to work after bumping the version of storybook and storybook-builder-vite.

diff --git a/package.json b/package.json
index f7f4f2f..87a5702 100644
--- a/package.json
+++ b/package.json
@@ -27,12 +27,12 @@
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",
-    "@storybook/addon-actions": "^6.3.10",
-    "@storybook/addon-docs": "^6.3.10",
-    "@storybook/addon-essentials": "^6.3.10",
-    "@storybook/addon-links": "^6.3.10",
-    "@storybook/addon-storysource": "^6.3.10",
-    "@storybook/react": "^6.3.10",
+    "@storybook/addon-actions": "^6.4.0",
+    "@storybook/addon-docs": "^6.4.0",
+    "@storybook/addon-essentials": "^6.4.0",
+    "@storybook/addon-links": "^6.4.0",
+    "@storybook/addon-storysource": "^6.4.0",
+    "@storybook/react": "^6.4.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
@@ -45,7 +45,7 @@
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.26.1",
-    "storybook-builder-vite": "^0.1.0",
+    "storybook-builder-vite": "^0.1.13",
     "typescript": "^4.3.2",
     "vite": "^2.6.4",
     "vite-plugin-markdown": "^2.0.2"

I'll close this for now but if this doesn't work let me know and I'll re-open this.

[jackysee]

I'm on storybook 6.5.4 , the transclusion does not work. Dependencies:

    "@storybook/addon-actions": "^6.5.4",
    "@storybook/addon-docs": "^6.5.4",
    "@storybook/addon-essentials": "^6.5.4",
    "@storybook/addon-links": "^6.5.4",
    "@storybook/addon-storysource": "^6.5.4",
    "@storybook/builder-vite": "^0.1.35",

Config

        {
            name: '@storybook/addon-docs',
            options: {
                configureJSX: true,
                transcludeMarkdown: true
            }
        }

Usage

import Changelog from '../CHANGELOG.md';
<Changelog />

[openscript]

I've just updated to 6.5.4 and it still seems to work for me: https://github.com/openscript-ch/react-section-dividers

[jackysee]

I'm using @storybook/vue3. Don't know if it's related

[IanVS]

@jackysee any chance you could share a reproduction repo that we can look into?

[jackysee]

Here https://github.com/jackysee/sb-vite-vue3 It's just an empty vite project with storybook. The index.stories.mdx should load CHANGELOG.md

[IanVS]

@jackysee Thanks for the reproduction. It works correctly if I move the import line to the top of the mdx file.

From:

<Meta title="Intro" />

# Hello World

Adipisicing eligendi accusamus dicta odio excepturi Hic aperiam odio perferendis blanditiis numquam architecto? Necessitatibus maiores quos dolore voluptatum voluptatibus! Nisi commodi dolor dolorum corrupti laboriosam Mollitia sed ad ad molestias?

# Change log

import Changelog from '../CHANGELOG.md';
<Changelog />

To (works):

import Changelog from '../CHANGELOG.md';

<Meta title="Intro" />

# Hello World

Adipisicing eligendi accusamus dicta odio excepturi Hic aperiam odio perferendis blanditiis numquam architecto? Necessitatibus maiores quos dolore voluptatum voluptatibus! Nisi commodi dolor dolorum corrupti laboriosam Mollitia sed ad ad molestias?

# Change log

<Changelog />

[jackysee]

Oh thanks. It works now. Is it a must to have import at top?

[IanVS]

Normally imports are hoisted to the top of the file, but it seems that MDX might have a restriction that they need to be placed at the top. It's good practice either way to keep all of your imports at the top, to avoid surprises from hoisting.

[openscript]

By the way, if you upgrade to Storybook 7 and running into this issue again, checkout the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed

import { Markdown } from '@storybook/blocks';
import ReadMe from './README.md?raw';

...

<Markdown>{ReadMe}</Markdown>