如何在Storybook中制作stories.mdx文件

Question

由于使用了markdown语法，我想在Storybook中的组件旁边添加文档。我遵循了Storybook的指导方针，但在启动应用程序时，我在终端中收到以下错误：

致命错误：CALL_AND_RETRY_LAST分配失败-JavaScript堆内存不足。(…(命令失败，信号为"；SIGABRT"；。

这是我的故事书配置：

// main.ts
module.exports = {
stories: ["../**/stories.tsx", "../**/stories.mdx"],
addons: [
{
name: "@storybook/addon-essentials",
options: { backgrounds: false, docs: false, viewport: false },
},
"storybook-addons-abstract/register",
],
};
// webpack.config.js
module: {
rules: [
{ test: /.mdx?$/, use: ["babel-loader", "@mdx-js/loader"]}
//... + all necessary loaders such as ts-loader, etc.)
]
}

我的组件：

import React from "react";
export default function Text({ content }) {
return <h1>{content}</h1>;
}

故事(stories.mdx(：

import { Story, Meta, Canvas } from "@storybook/components";
import Text from ".";
<Meta title="MDX/Text" component={Text} />
# Checkbox
Here is the text component:
<Canvas>
<Story name="defaut">
<Text text="hello" />
</Story>
</Canvas>

如何解决此问题？

Answer 1

试着这样做：

import { Story, Meta, Canvas } from "@storybook/components";
import Text from ".";
<Meta title="MDX/Text" component={Text} />
export const Template = (args) => <Text {...args} />
# Checkbox
Here is the text component:
<Canvas>
<Story name="Primary" args={{ text: 'hello' }}>
{Template.bind({})}
</Story>
</Canvas>

Answer 2

import Text from ".";

我认为这可能是问题所在，似乎是一个无限循环