Storybook: Unexpected default export without title: undefined

[JamesIves]

Describe the bug

Attempting to compile mdx files, and I'm getting Unexpected default export without title: undefined. I'm using the storiesOf API. Works in a previous version, but has since started to fail.

To Reproduce

1. Check out this branch: https://github.com/UnitedIncome/components/tree/upgrade-next
2. Run yarn install && yarn start.
3. All of the stories will throw this error.

I've attempted a number of workarounds I've read up on this issue.

• I'm not default exporting from story files.
• I've tried adding a <Meta title="" />to a story (even though I shouldn't need one?)
• Tried removing any whitespaces, same error appears. Unsure if just one story having this issue will cause all of them to fail or not?
• Upgraded to the latest SB versions.

Expected behavior

It should compile.

[shilman]

@JamesIves Amazing progress with your design system. It's looking fantastic, and really exciting to see how it's coming together. 👏👏👏

The "unexpected default export w/o title" error is a problem with your configuration (and possibly with our documentation -- if there's something that needs to be fixed there, a PR would be 💯 ).

Your webpack.config.js is configuring @mdx-js/loader to run on ALL mdx stories, which includes .(story|stories).mdx files.

     {
       test: /\.mdx$/,
       use: ['babel-loader', '@mdx-js/loader'],
     },

That loader generates a default export without a title, which causes the error.

Meanwhile, your presets.js is exporting @storybook/addon-docs instead of @storybook/addon-docs/preset:

module.exports = [
  {
    name: '@storybook/addon-docs',
    options: {
      configureJSX: true,
      babelOptions: {},
      sourceLoaderOptions: null,
    },
  },
];

The docs preset is already configured to do the right thing on .mdx files and .(story|stories).mdx files, so if you delete the line from your webpack config and fix presets.js to refer to @storybook/addon-docs/preset, everything works.

[JamesIves]

Thanks! We've been enjoying the build out internally. I'll gladly make a PR when I figure out the issue.

Switching to @storybook/addon-docs/preset results in the following error. Do I need to somehow tell Storybook which library is being used so it knows which preset to use?

WARN   Failed to load preset: {"name":"@storybook/addon-docs/preset","options":{"configureJSX":true,"babelOptions":{},"sourceLoaderOptions":null}}
ERR! Error: Cannot find module '@storybook/addon-docs/preset'

Additionally I end up getting a compile error if I strip out the mdx line in the webpack config, but I'm guessing that's just a side effect of it not being about to find the correct preset.

[shilman]

@JamesIves oh right. Also upgrade all your storybook packages to 5.3!

[JamesIves]

That did the trick! Thanks so much.