MDX - 故事书 + React + Typescript

Question

我尝试使用 MDX 标记为我的故事书构建实时文档。当我运行故事书时，出现以下错误：

模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：

SyntaxError: C:/Users/User/Desktop/priority-style-react/src/stories/Button1.stories.mdx: Unexpected token (12:9)

  10 | const makeShortcode = name => function MDXDefaultShortcode(props) {
  11 |   console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
> 12 |   return <div {...props}/>
     |          ^
  13 | };
  14 | const Preview = makeShortcode("Preview");
  15 | const layoutProps = {

我要加载的 webpack 配置.mdx是：

config.module.rules.push({
    test: /\.mdx?$/,
    use: [{loader: "babel-loader"}, {loader: '@mdx-js/loader'}],
    exclude: /node_modules/,
    include: [/src/]
});

故事书config.js：

import { configure, addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';

import '../style/index.scss';

const req = require.context('../src/stories', true, /.stories.(tsx|mdx)/);

addDecorator(withKnobs);
configure(req, module);

看起来加载程序工作不正确。谁能帮助我理解我错过了什么？

Answer 1

所以，伙计们，也许这个答案会对某人有所帮助，并节省大量宝贵的时间。

我只是通过.mdx删除webpack.config.js. 我只是将故事书 config.js 保留原样。然后问题就消失了。

此外，如果 .mdx 文件中的 JSX 代码之间有空行，您也会遇到此问题，正如 Zunaib Imtiaz 所回答的那样。

祝大家好运！