Storybook: Unexpected default export without title: {"includeStories":[],"parameters":{"docs":{}}}

[o-t-w]

Describe the bug
I am getting the error Unexpected default export without title: {"includeStories":[],"parameters":{"docs":{}}}

To Reproduce

I only have one story: CreditCard.stories.mdx:

import { Meta, Story } from '@storybook/addon-docs/blocks';
import { withKnobs, select, boolean } from '@storybook/addon-knobs';

import CreditCard from '../src/CreditCard.js';
<Meta title="Design System|CreditCard" component={CreditCard} />

# Credit card

I have installed the necessary dependencies:

  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@storybook/addon-actions": "^5.2.5",
    "@storybook/addon-docs": "^5.2.5",
    "@storybook/addon-knobs": "^5.2.5",
    "@storybook/addon-links": "^5.2.5",
    "@storybook/addons": "^5.2.5",
    "@storybook/react": "^5.2.5",
    "babel-loader": "^8.0.6"
  }

config.js file:

import { configure } from '@storybook/react';

// automatically import all files ending in *.stories.js
configure(require.context('../stories', true, /\.stories\.(js|mdx)$/), module);

addons.js file:

import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-docs/register';
import '@storybook/addon-knobs/register';

presets.js file:

module.exports = ['@storybook/addon-docs/react/preset'];

System:

OS: macOS 10.15
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz

Binaries:
Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
Browsers:
Chrome: 78.0.3904.70
Firefox: 70.0
Safari: 13.0.1
npmPackages:
@storybook/addon-actions: ^5.2.5 => 5.2.5
@storybook/addon-docs: ^5.2.5 => 5.2.5
@storybook/addon-knobs: ^5.2.5 => 5.2.5
@storybook/addon-links: ^5.2.5 => 5.2.5
@storybook/addons: ^5.2.5 => 5.2.5
@storybook/react: ^5.2.5 => 5.2.5

[shilman]

@o-t-w this all looks fine to me. do you have a repro repo you can share?

[shilman]

Checked your repro repo at https://github.com/o-t-w/storybook-ds and it looks like a whitespace issue.

This works:

import { Meta, Story } from "@storybook/addon-docs/blocks";
import { withKnobs, select, boolean } from "@storybook/addon-knobs";
import CreditCard from "../src/CreditCard.js";

<Meta title="CreditCard" component={CreditCard} />

# Credit card

- This component must use `inputmode="numeric"` in order to bring up the correct keyboard on mobile.

<Story name="standard">
  <CreditCard />
</Story>

AFAIK this is an issue with the underlying MDX parser and not a Storybook issue, tho I could be wrong.

[o-t-w]

Thanks @shilman, that worked :)

[kevinbarabash]

I'm running into the same issue. I'm using the manual setup because I couldn't figure out how to make the preset work with typescript. Here's my setup:

addons.js

import "@storybook/addon-docs/register";

config.js:

import {addParameters, configure} from "@storybook/react";
import {DocsPage, DocsContainer} from "@storybook/addon-docs/blocks";

// automatically import all files ending in *.stories.js
configure(
    require.context("../stories", true, /\.stories\.(js|jsx|ts|tsx|mdx)$/),
    module,
);

addParameters({
    options: {
        enableShortcuts: false,
    },
    docs: {
        container: DocsContainer,
        page: DocsPage,
    },
});

webpack.config.js

const createCompiler = require("@storybook/addon-docs/mdx-compiler-plugin");

module.exports = async ({config}) => {
    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        loader: require.resolve("babel-loader"),
        options: {
            presets: [["react-app", {flow: false, typescript: true}]],
        },
    });
    config.module.rules.push({
        test: /\.(stories|story)\.mdx$/,
        use: [
            {
                loader: "babel-loader",
                options: {
                    presets: [["react-app", {flow: false, typescript: true}]],
                },
            },
            {
                loader: "@mdx-js/loader",
                options: {
                    compilers: [createCompiler({})],
                },
            },
        ],
    });
    config.module.rules.push({
        test: /\.(stories|story)\.[tj]sx?$/,
        loader: require.resolve("@storybook/source-loader"),
        exclude: [/node_modules/],
        enforce: "pre",
    });
    config.resolve.extensions.push(".ts", ".tsx", ".js", ".jsx", ".mdx");

    return config;
};

stories/Test.stories.mdx:

Hello, world!

Full stack trace:

Error: Unexpected default export without title: {"includeStories":[],"parameters":{"docs":{}}}
    at http://localhost:6006/vendors~main.048aadebd5a2c4b0192d.bundle.js:44810:17
    at Array.forEach ()
    at http://localhost:6006/vendors~main.048aadebd5a2c4b0192d.bundle.js:44803:13
    at render (http://localhost:6006/vendors~main.048aadebd5a2c4b0192d.bundle.js:24904:13)
    at ConfigApi.configure (http://localhost:6006/vendors~main.048aadebd5a2c4b0192d.bundle.js:24936:9)
    at Object.configure (http://localhost:6006/vendors~main.048aadebd5a2c4b0192d.bundle.js:44893:15)
    at configure (http://localhost:6006/vendors~main.048aadebd5a2c4b0192d.bundle.js:50999:24)
    at Module. (http://localhost:6006/main.048aadebd5a2c4b0192d.bundle.js:23:67)
    at Module../.storybook/config.js (http://localhost:6006/main.048aadebd5a2c4b0192d.bundle.js:33:30)
    at __webpack_require__ (http://localhost:6006/runtime~main.048aadebd5a2c4b0192d.bundle.js:786:30)

[kevinbarabash]

I didn't realize that I needed a <Meta> in my .mdx file. It's working now.

[nahumzs]

Unexpected default export without title can also happens if you use an export default function inside of your story, if for some reason want to reuse the story is better to simply export it without doing it with the default option

[WilliamIPark]

I run into this today. Just to make the "whitespace issue" more clear, the fix was to add an empty line in between my imports and the <Meta /> component

[pfmartins4]

I'm running into this issue. I tried all stuff from above, none worked.
webpack.config.js

module.exports = {
    entry: './src/app',
    output: {
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.mdx$/,
                exclude: /node_modules/,
                use: ['babel-loader', '@mdx-js/loader']

            },
            {
                test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            limit: 10000,
                            mimetype: 'application/font-woff',
                        },
                    },
                ],
            },
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx', '.mdx']
    }
};

./storybook/main.js

const path = require('path');

// your app's webpack.config.js
const custom = require('../webpack.config.js');

module.exports = {
  stories: [
    "../src/components/**/*.stories.(js|mdx)",
    "../src/styles/**/*.stories.(js|mdx)", 
    "../stories/*.stories.(js|mdx)"
  ],
  addons: [
    "@storybook/addon-actions/register",
    "@storybook/addon-essentials",
    "@storybook/addon-knobs/register",
    "@storybook/addon-links/register",
    {
      name: '@storybook/addon-docs/preset',
      options: {
        configureJSX: true,
        babelOptions: {},
        sourceLoaderOptions: null,
      },
    },
  ],

  webpackFinal: (config) => {
    return { ...config, module: {...config.module, rules: custom.module.rules } };
  },
};

./storybook/preview.js

import { configure, addDecorator, addParameters } from '@storybook/react';
import { DocsPage, DocsContainer } from "@storybook/addon-docs/blocks"
import GlobalStyle from "/styles/globals";
import React from "react"

addParameters({
  docs: {
    container: DocsContainer,
    page: DocsPage
  }
})

addDecorator(s => <div style={{paddingLeft: "10px", paddingTop: "30px"}}><GlobalStyle />{s()}</div>);

configure(require.context('../src/components', true, /\.stories\.(js|mdx)$/), module);

src/components/button/button.stories.mdx

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

<Meta title="Component" component={Button} />

# Button

Let's try this new component to show me how does doc things

<Story id="batata" name="joao">
   <Button 
      type="primary"
      size="md"
      fill="default"
    >
      label
    </Button>
</Story>

I guess i'm missing something in the config files

[shilman]

@pfmartins4 rules: custom.module.rules looks like it's overwriting the storybook rules entirely, so you're not getting the MDX compiler plugin:

https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/common/preset.ts#L121

[airtonix]

@shilman you guys should really be using webpack-config to construct and expose your webpack configs... seriously makes work with merging and composing various parts there of clearer and easier.

• https://www.npmjs.com/package/webpack-config
• https://github.com/Fitbit/webpack-config

[jeremylenz]

I had this issue when upgrading from Storybook v5.3 to v6. We also upgraded to use main.js syntax at the same time.

module.exports = {
  stories: [`${process.cwd()}/webpack/**/*.stories.@(js|mdx)`],
  addons: [
    '@storybook/addon-docs',
    ...

Due to the new main.js API, having addon-docs in there was using a webpack preset which was running @mdx-js/loader. Also, we were running @mdx-js/loader in our Webpack configuration:

// Stories MDX loader   
  config.module.rules.push({    
    test: /\.mdx$/, 
    exclude: /node_modules/,    
    use: [  
      { 
        loader: require.resolve('babel-loader'),    
      },    
      { 
        loader: require.resolve('@mdx-js/loader'),  
        options: {  
          compilers: [createMdxCompiler({})],   
        },  
      },    
    ],  
  });

So with this setup, MDX was trying to process the same files twice. The way it manifested was this exact error. Also, it was doing some really crazy things like taking a variable named __page and turning it into

`}<strong parentName="p">{`page

Removing @mdx-js/loader from our webpack rules is what fixed this for me.