Reactjs 有人成功地将故事书文档与盖茨比集成在一起了吗？

在我的盖茨比主题项目中，我尝试使用.mdx格式集成故事书。 但是storybook的网页包无法转换.mdx文件

它不断抛出不同的错误

我尝试过使用故事书预设和不使用预设，但没有解决方案

卡片组件

import React from 'react';

const Card = () => {
    return (
        <div className="laptopUp:max-w-lg max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
            <div className="sm:flex sm:items-center px-6 py-4">
                <img
                    className="block mx-auto sm:mx-0 sm:flex-shrink-0 h-16 sm:h-24 rounded-full"
                    src="https://randomuser.me/api/portraits/women/17.jpg"
                    alt="Woman's Face"
                />
                <div className="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left">
                    <p className="text-xl leading-tight">Erin Lindford</p>
                    <p className="text-sm leading-tight text-gray-600">
                        Customer Support Specialst
                    </p>
                    <div className="mt-4">
                        <button className="text-purple-500 hover:text-white hover:bg-purple-500 border border-purple-500 text-xs font-semibold rounded-full px-4 py-1 leading-normal">
                            Message
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export {Card};

我的网页包配置：

// module.exports = ({ config, mode }) => {
//     // Transpile Gatsby module because Gastby includes un-transpiled ES6 code.
//     config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
//     // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
//     config.module.rules[0].use[0].loader = require.resolve('babel-loader')

//     // The next two lines should always reflect the config in jest-preprocess.js until there is a way for Gatsby to expose an internal webpack.config
//     // use @babel/preset-react for JSX and env (instead of staged presets)
//     config.module.rules[0].use[0].options.presets = [
//       require.resolve('@babel/preset-react'),
//       require.resolve('@babel/preset-env'),
//     ]
//     // use @babel/plugin-proposal-class-properties for class arrow functions
//     config.module.rules[0].use[0].options.plugins = [
//       require.resolve('@babel/plugin-proposal-class-properties'),
//     ]

//     // https://github.com/gatsbyjs/gatsby/issues/10662:
//     // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
//     config.resolve.mainFields = ["browser", "module", "main"]

//     return config
// }

/* eslint-disable no-param-reassign */

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

// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
    const isProduction = mode

    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
    config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]

    // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
    config.module.rules[0].use[0].loader = require.resolve('babel-loader')

    // use @babel/preset-react for JSX and env (instead of staged presets)
    config.module.rules[0].use[0].options.presets = [
        require.resolve('@babel/preset-react'),
        require.resolve('@babel/preset-env')
    ]

    // use @babel/plugin-proposal-class-properties for class arrow functions
    config.module.rules[0].use[0].options.plugins = [
        require.resolve('@babel/plugin-proposal-class-properties'),
        require.resolve('babel-plugin-remove-graphql-queries')
    ]

    config.module.rules = config.module.rules.filter(
        f => f.test.toString() !== '/\\.css$/'
    )

    config.module.rules.push(
        {
            test: /\.(ttf|woff|woff2|eot|svg)$/,
            use: 'file-loader?name=[name].[ext]',
            exclude: /\.inline.svg$/
        },
        {
            test: /\.(jpg|png|jpeg|jpg)$/,
            loader: 'file-loader',
            include: path.resolve(__dirname, '../static/')
        },
        {
            test: /\.css$/,
            exclude: /\.module\.css$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1,
                        localIdentName: 'mod-[hash:base64:8]'
                    }
                },
                'postcss-loader'
            ],
            include: path.resolve(__dirname, '../')
        },
        {
            test: /\.story\.mdx$/,
            exclude: [/node_modules/],
            include: [
                path.resolve(__dirname, '../src'),
            ],
            use: [
              {
                loader: 'babel-loader',
                options: {
                  plugins: ['@babel/plugin-transform-react-jsx']
                }
              },
              {
                loader: '@mdx-js/loader',
                options: {
                  compilers: [createCompiler({})]
                }
              }
            ],
          },
        {
            test: /\.module\.css$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1,
                        modules: true,
                        localIdentName: '[local]-[hash:base64:5]'
                    }
                },
                'postcss-loader'
            ],
            include: path.resolve(__dirname, '../src')
        }
    )

    config.plugins.push(
        new webpack.DefinePlugin({
            STORYBOOK: JSON.stringify(true),
            PRODUCTION: JSON.stringify(isProduction)
        })
    )

    config.resolve.alias['@'] = path.resolve(__dirname, '../src/')

    config.resolve.mainFields = ['browser', 'module', 'main']

    return config
}

我希望能够看到道具和mdx stor有一个正常的故事。 而不是得到各种各样的错误

Github问题：

要复制的Github回购协议：

import { configure, addParameters } from '@storybook/react';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
import { action } from '@storybook/addon-actions';
import '../main.css';

addParameters({
  docs: {
    container: DocsContainer,
    page: DocsPage,
    prepareForInline: (storyFn) => storyFn(),
  },
});

// Gatsby's Link overrides:
// Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here
global.___loader = {
  enqueue: () => {},
  hovering: () => {}
};
// Gatsby internal mocking to prevent unnecessary errors in storybook testing environment
global.__PATH_PREFIX__ = '';
// This is to utilized to override the window.___navigate method Gatsby defines and uses to report what path a Link would be taking us to if it wasn't inside a storybook
window.___navigate = pathname => {
  action('NavigateTo:')(pathname);
};

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

// module.exports = ({ config, mode }) => {
//     // Transpile Gatsby module because Gastby includes un-transpiled ES6 code.
//     config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
//     // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
//     config.module.rules[0].use[0].loader = require.resolve('babel-loader')

//     // The next two lines should always reflect the config in jest-preprocess.js until there is a way for Gatsby to expose an internal webpack.config
//     // use @babel/preset-react for JSX and env (instead of staged presets)
//     config.module.rules[0].use[0].options.presets = [
//       require.resolve('@babel/preset-react'),
//       require.resolve('@babel/preset-env'),
//     ]
//     // use @babel/plugin-proposal-class-properties for class arrow functions
//     config.module.rules[0].use[0].options.plugins = [
//       require.resolve('@babel/plugin-proposal-class-properties'),
//     ]

//     // https://github.com/gatsbyjs/gatsby/issues/10662:
//     // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
//     config.resolve.mainFields = ["browser", "module", "main"]

//     return config
// }

/* eslint-disable no-param-reassign */

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

// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
    const isProduction = mode

    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
    config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]

    // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
    config.module.rules[0].use[0].loader = require.resolve('babel-loader')

    // use @babel/preset-react for JSX and env (instead of staged presets)
    config.module.rules[0].use[0].options.presets = [
        require.resolve('@babel/preset-react'),
        require.resolve('@babel/preset-env')
    ]

    // use @babel/plugin-proposal-class-properties for class arrow functions
    config.module.rules[0].use[0].options.plugins = [
        require.resolve('@babel/plugin-proposal-class-properties'),
        require.resolve('babel-plugin-remove-graphql-queries')
    ]

    config.module.rules = config.module.rules.filter(
        f => f.test.toString() !== '/\\.css$/'
    )

    config.module.rules.push(
        {
            test: /\.(ttf|woff|woff2|eot|svg)$/,
            use: 'file-loader?name=[name].[ext]',
            exclude: /\.inline.svg$/
        },
        {
            test: /\.(jpg|png|jpeg|jpg)$/,
            loader: 'file-loader',
            include: path.resolve(__dirname, '../static/')
        },
        {
            test: /\.css$/,
            exclude: /\.module\.css$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1,
                        localIdentName: 'mod-[hash:base64:8]'
                    }
                },
                'postcss-loader'
            ],
            include: path.resolve(__dirname, '../')
        },
        {
            test: /\.story\.mdx$/,
            exclude: [/node_modules/],
            include: [
                path.resolve(__dirname, '../src'),
            ],
            use: [
              {
                loader: 'babel-loader',
                options: {
                  plugins: ['@babel/plugin-transform-react-jsx']
                }
              },
              {
                loader: '@mdx-js/loader',
                options: {
                  compilers: [createCompiler({})]
                }
              }
            ],
          },
        {
            test: /\.module\.css$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1,
                        modules: true,
                        localIdentName: '[local]-[hash:base64:5]'
                    }
                },
                'postcss-loader'
            ],
            include: path.resolve(__dirname, '../src')
        }
    )

    config.plugins.push(
        new webpack.DefinePlugin({
            STORYBOOK: JSON.stringify(true),
            PRODUCTION: JSON.stringify(isProduction)
        })
    )

    config.resolve.alias['@'] = path.resolve(__dirname, '../src/')

    config.resolve.mainFields = ['browser', 'module', 'main']

    return config
}