MDX - 故事书 + React + 打字稿

Posted 2023-02-19

【中文标题】MDX - 故事书 + React + 打字稿

【英文标题】：MDX - Storybook + React + Typescript

【发布时间】：2020-05-21 02:07:40

【问题描述】：

我尝试使用 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);

看起来加载器工作不正常。 谁能帮我理解我错过了什么？

【参考方案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/>
;

它应该可以工作，因为我在这个问题上摸索了好几个小时。

【讨论】：

谢谢您的回答。我也遇到过这样的问题。但是在这种情况下，这是双重配置的错误（在故事书配置和webpack配置中）。

您能否分享您的发现@Ihor Lavs

【参考方案2】：

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

我通过删除webpack.config.js 中的.mdx 扩展名的配置解决了这个问题。我只是将我的故事书 config.js 保持原样。然后问题就消失了。

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

祝你好运，伙计们！