Storybook throws unexpected default export without title with Docs addon and .mdx file

Viewed 1658

I'm trying to use the docs addon with my Storybook. I've configured my Storybook as follows:

module.exports = {
  stories: [
    '../src/**/*.stories.([tj]sx|mdx)',
    '../docs/**/*.([tj]sx|mdx)'
  ],
  addons: [
    '@storybook/preset-typescript', 
    '@storybook/addon-actions/register', 
    '@storybook/addon-storysource', 
    '@storybook/addon-docs'
  ],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve('babel-loader'),
      options: {
        presets: [['react-app', { flow: false, typescript: true }]],
      },
    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
  },
};

I've created the following file docs/welcome.mdx:

import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';

<Meta title="Welcome" />

Test

The story book successfully builds, but displays the following error for any component:

Unexpected default export without title: undefined

loadStories/</<@http://localhost:6006/vendors~main.7a0ff0b8bf0e3413b462.bundle.js:20821:17
loadStories/<@http://localhost:6006/vendors~main.7a0ff0b8bf0e3413b462.bundle.js:20814:13
render@http://localhost:6006/vendors~main.7a0ff0b8bf0e3413b462.bundle.js:11229:13
ConfigApi/this.configure@http://localhost:6006/vendors~main.7a0ff0b8bf0e3413b462.bundle.js:11264:9
configure@http://localhost:6006/vendors~main.7a0ff0b8bf0e3413b462.bundle.js:20921:15
configure@http://localhost:6006/vendors~main.7a0ff0b8bf0e3413b462.bundle.js:21366:24
./.storybook/generated-entry.js/<@http://localhost:6006/main.7a0ff0b8bf0e3413b462.bundle.js:16:67
./.storybook/generated-entry.js@http://localhost:6006/main.7a0ff0b8bf0e3413b462.bundle.js:17:30
__webpack_require__@http://localhost:6006/runtime~main.7a0ff0b8bf0e3413b462.bundle.js:785:30
hotApply@http://localhost:6006/runtime~main.7a0ff0b8bf0e3413b462.bundle.js:709:33
cb@http://localhost:6006/vendors~main.7a0ff0b8bf0e3413b462.bundle.js:178512:36
check/<@http://localhost:6006/vendors~main.7a0ff0b8bf0e3413b462.bundle.js:178527:11

What am I doing wrong?

I'm using the version 5.3.18 of Storybook.

2 Answers

The way I resolved this is by using the extension ".stories.mdx" for my stories, in ".storybook/main.js",using any other extension like ".storybook.mdx", gave this error

In addition to the solution above, story files need to have a prefix, eg button.stories.mdx.

Just stories.mdx will give you the error as well.

Related