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

【问题标题】：How to make a stories.mdx file in Storybook?如何在 Storybook 中制作 stories.mdx 文件？
【发布时间】：2020-09-23 13:03:57
【问题描述】：

感谢 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>

如何解决这个问题？

【问题讨论】：

您可以将链接添加到您所遵循的指南吗？我没有看到任何像你在@storybook/addon-docsgithub.com/storybookjs/storybook/tree/next/addons/docs中的配置
好吧，您实际上是在 addon-essentials 选项中使用 docs: false 禁用 addon-docs，有什么原因吗？

标签： reactjs markdown storybook mdxjs

【解决方案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>

【讨论】：

【解决方案2】：

import Text from ".";

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

【讨论】：