Storybook 使用 Docs 插件和 .mdx 文件抛出没有标题的意外默认导出

Question

我正在尝试将文档插件与我的 Storybook 一起使用。我已按如下方式配置我的 Storybook：

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;
  },
};

我创建了以下文件 docs/welcome.mdx:

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

<Meta title="Welcome" />

Test

故事书构建成功，但对任何组件显示以下错误：

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

我做错了什么？

我使用的是 Storybook 5.3.18 版本。

Answer 1

我解决这个问题的方法是为我的故事使用扩展名“.stories.mdx”，在“.storybook/main.js”中，使用任何其他扩展名，如“ .storybook.mdx", 给出了这个错误

Answer 2

除了上面的解决方案，故事文件需要有一个前缀，例如button.stories.mdx。

只是 stories.mdx 也会给你错误。

Storybook 使用 Docs 插件和 .mdx 文件抛出没有标题的意外默认导出

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

reactjs

storybook