fromId is not defined when using mdx format
See original GitHub issueDescribe the bug
Alright, so I have been trying to translate some of my Docz .mdx files to storybook, with version
v5.2.0-alpha.4. And so far so good, I get the canvas tab to work, but when I navigate to the docs tab it crashes saying Cannot read property 'fromId' of undefined
.
To Reproduce Steps to reproduce the behavior:
-
Install
@storybook/react
and@storybook/addon-docs
to version 5.2.0-alpha.4. -
Add the following configuration:
.storybook/config.js
import { load } from '@storybook/react';
// load(require.context('../stories', true, /\.stories\.js$/), module);
load(require.context('../stories', true, /\.stories\.mdx$/), module);
.storybook/preset.js
module.exports = ['@storybook/addon-docs/common/preset'];
.storybook/webpack.config.js
const path = require('path');
const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
const babelrc = path.resolve(__dirname, '.babelrc');
module.exports = async ({ config }) => {
console.log(config.module.rules);
config.module.rules.push({
test: /\.mdx$/,
use: [
{
loader: 'babel-loader',
options: {
configFile: babelrc
}
},
{
loader: '@mdx-js/loader',
options: {
compilers: [createCompiler({})],
},
},
],
});
return config;
};
.storybook/addons.js
import '@storybook/addon-docs/register';
.storybook/.babelrc
{
"presets": [
"@babel/preset-react"
]
}
- Add a stories.mdx file, let’s say /stories/button.stories.mdx with the following content:
stories/button.stories.mdx
import { Story } from '@storybook/addon-docs/blocks';
import { Button } from '@storybook/react/demo';
export const componentMeta = {
title: 'MDX|Button',
}
# Hello Docs
Welcome to the future of Storybook!
<Story name="hello">
<Button >Hello button!</Button>
</Story>
- Run storybook and navigate to that documentation
Expected behavior The Docs tab open, and shows the documentation
Screenshots
Code snippets You can find them in the reproduce section.
System:
- OS: MacOS
- Device: Macbook Pro 2018
- Browser: chrome
- Framework: react
- Addons: @storybook/addon-docs
- Version: v5.2.0-alpha.4
Additional context I think I have added everything, If more information is needed, I will provide it!
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:15 (5 by maintainers)
Top GitHub Comments
I have the same issue in storybook 5.3.14 My
main.js
file isSolved: I forgot to set up DocsPage in .
storybook/preview.js
Yes, that was the solution! Sorry for losing your time with this guys.