如何在故事簿中创建stories.mdx文件？

Question

我想在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 ".";

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