question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

fromId is not defined when using mdx format

See original GitHub issue

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!

Issue Analytics

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

github_iconTop GitHub Comments

2reactions
eden-lanecommented, Feb 27, 2020

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

1reaction
chrispcodecommented, May 13, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Troubleshooting MDX
This article goes through several common problems and errors that might occur when using MDX. To understand how the MDX format works, ...
Read more >
MDX Format - Storybook - JS.ORG
MDX is a standard file format that combines Markdown with JSX. ... MDX-defined stories are identical to regular Storybook stories, so they can...
Read more >
Using exported variable in MDX does not work - Stack Overflow
Defining variables with exports If you need to define a variable in your MDX document, you can use an export to do so....
Read more >
gatsby-plugin-mdx
mdx file extension are treated as MDX when using gatsby-source-filesystem . To use .md or other file extensions, you can define an array...
Read more >
Why the Wii U Really Failed and How Nintendo Bounced Back
At least, not with the Wii U. The Wii U's GamePad gave gamers the option to play ... The Wii U, however, kept...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found