Closed openscript closed 2 years ago
Could possibly be related to this: https://github.com/storybookjs/storybook/issues/15879
@openscript, what version of storybook are you using?
Version 6.3.10
@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.
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 />
I've just updated to 6.5.4 and it still seems to work for me: https://github.com/openscript-ch/react-section-dividers
I'm using @storybook/vue3
. Don't know if it's related
@jackysee any chance you could share a reproduction repo that we can look into?
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
@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 />
Oh thanks. It works now. Is it a must to have import at top?
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.
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>
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 followingStart.stories.mdx
:This works well, when I use the built in builder:
When I switch to
storybook-builder-vite
the README.md isn't rendered:There are several runtime errors in the console. This issue can be reproduced with this branch: