1

由于降价语法，我想在 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>

如何解决这个问题？

4

2 回答 2

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>
于 2021-02-03T17:34:11.383 回答
0

import Text from ".";

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

于 2022-01-27T03:22:09.583 回答