storybook: fromId is not defined when using mdx format

Describe 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:

  1. Install @storybook/react and @storybook/addon-docs to version 5.2.0-alpha.4.

  2. 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"
  ]
}
  1. 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>
  1. Run storybook and navigate to that documentation

Expected behavior The Docs tab open, and shows the documentation

Screenshots image image image

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!

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 1
  • Comments: 15 (5 by maintainers)

Most upvoted comments

I have the same issue in storybook 5.3.14 My main.js file is

module.exports = {
  stories: ['../app/**/*.stories.mdx'],
  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
      }
    },
    '@storybook/addon-knobs',
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ],
  presets: [
    '@storybook/preset-typescript',
  ],
};

Solved: I forgot to set up DocsPage in .storybook/preview.js

Yes, that was the solution! Sorry for losing your time with this guys.