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

Question

我正在尝试在我的 Storybook 中使用 docs 插件。我已经按如下方式配置了我的故事书：

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

我究竟做错了什么？

我正在使用5.3.18Storybook的版本。

Answer 1

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