CODEWITHSUNDEEP
reactjsmarkdownstorybookmdxjs
DoneDeal0
DoneDeal0

Reputation: 6267

How to make a stories.mdx file in Storybook?

I would like to add documentation alongside my components in Storybook thanks to markdown syntax. I've followed Storybook's guidelines, but when launching the app, I receive the following error in my terminal:

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory. (...) Command failed with signal "SIGABRT".

Here is my storybook config:

// 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.)
        ]
}

My component:

import React from "react";

export default function Text({ content }) {
  return <h1>{content}</h1>;
}

And the story (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>

How to fix this?

Upvotes: 2

Views: 7365

Answers (2)

YuC
YuC

Reputation: 1847

import Text from ".";

I think this might be where the problem is, seems like it's an infinite loop

Upvotes: 0

Eder
Eder

Reputation: 11

Try to do it this way:

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>

Upvotes: 1

Related Questions