javascript - 故事书 + MDX

Question

我的.js故事在故事书上完美显示，但 .mdx 故事没有显示，我也没有收到错误

main.js

module.exports = {
  addons: [
    '@storybook/addon-docs/register',
    '@storybook/addon-actions/register',
    '@storybook/addon-links/register',
    '@storybook/addon-knobs/register',
    '@storybook/addon-storysource/register',
    '@storybook/addon-viewport/register',
  ],
};

webpack.config.js

正如这里建议的那样https://www.npmjs.com/package/@storybook/addon-docs#manual-configuration

config.module.rules.push({
    test: /\.(stories|story)\.mdx?$/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          plugins: ['@babel/plugin-transform-react-jsx'],
        },
      },
      {
        loader: '@mdx-js/loader',
        options: {
          compilers: [createCompiler({})],
        },
      },
    ],
  });

  config.module.rules.push({
    test: /\.(stories|story)\.jsx?$/,
    loader: require.resolve('@storybook/source-loader'),
    exclude: [/node_modules/],
    enforce: 'pre',
  });

预览.js

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

function loadStories() {
  const requires = [require.context('@rrc', true, /\.stories\.(js|mdx)$/)];
  for (const req of requires) req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);

现在我有两种类型的故事

故事.mdx

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

<Meta title="AAAAAAAAA AAAAAA/Chip2" component={Chip} />

# Chip

I can define a story with the function imported from CSF:

And I can also embed arbitrary markdown & JSX in this file.

<Chip label="Basic" />

<Preview>
  <Story name="all checkboxes">
    <form>
      <Chip label="Basic" />
    </form>
  </Story>
</Preview>

### Installing

A step by step series of examples that tell you how to get a development env running

和.js类似的故事

import React from 'react';
import { storiesOf } from '@storybook/react';
import { Chip } from '../../..';

storiesOf('Chip', module)
  .addParameters({
    component: Chip,
  })
  .add('Basic', () => <Chip label="Basic" />)
  .add('Disabled', () => <Chip label="Disabled" disabled />)

标签： javascriptreactjswebpackstorybook