gpt4 book ai didi

reactjs - MDX - 故事书 + react + typescript

转载 作者:行者123 更新时间:2023-12-04 12:24:53 26 4
gpt4 key购买 nike

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

看起来装载机工作不正常。
谁能帮助我理解我错过了什么?

最佳答案

好的,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}/>
};

它应该可以工作,因为我在这个问题上挠了几个小时。

关于reactjs - MDX - 故事书 + react + typescript ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60071069/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com