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 = {

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

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文件中有些愚蠢的东西

我们不接受空白行。

const makeShortcode = name => function MDXDefaultShortcode(props) {
console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
return <div {...props}/>
 // remove this blank line here.
};

到

const makeShortcode = name => function MDXDefaultShortcode(props) {
console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
return <div {...props}/>
};

它应该起作用，因为我在这个问题上抓了几个小时。

Answer 2

所以，伙计们，也许这个答案对某人有用，并节省了很多宝贵的时间。

我已解决此问题，只是删除了.mdx中webpack.config.js扩展名的配置。我只是将故事书config.js保留了原样。问题消失了。

另外，如Zunaib Imtiaz回答的那样，如果您的.mdx文件中的JSX代码之间有空行，您将面临这个问题。

祝大家好运！

MDX-故事书+ React +打字稿

2 个答案: