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

Question

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.

Answer 1

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

Answer 2

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.