Question 224724 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How do I solve "Unable to render story <component> as the component annotation is missing from the default export" in Storybook?

I’m new to Storybook and am setting up my first React components and Stories file, as such:

Button.jsx:

import React from "react";

export default function Button({title}) {
  return (
    <div className="button">
       {title}
    </div>
  )
}

Button.stories.js

import { Button } from './Button';

export default {
  component: Button,
};

export const Primary = {
  title: "Primary"
};

However, I am getting error

Unable to render story components-button--primary as the component annotation is missing from the default export

in Storybook.

I’m really not sure what this means and Google is not giving me anything.

Would anyone be able to point me in the right direction at all?

Tags:

3

Answers


  1. 0

    try exporting component like this

    import React from "react";

    function Button({title}) { }

    export default Button

    Login or Signup to reply.
  2. 0

    The error is showing because you are exporting a default component from Button.jsx but importing a named component from that same file in Button.stories.js. Long story short, you are mixing your import and export strategies.

    To fix this, all you have to do is change your import.

    import Button from './Button';

export default {
  component: Button,
};

export const Primary = {
  title: "Primary"
};

    Alternatively, you could opt to change the export instead.

    export function Button({ title }) {
  return (
    <div className="button">
       {title}
    </div>
  )
}

    You only need to do one of these.

    And remember it is important to always import your components the same way you export theme. E.g.

    You can export/import named components like so:

    // Export named component
export const Component = () => <div>Some Component</div>

// import named component
import { Component } from 'path/to/component'

    You can export/import default components like so:

    // export default
const Component = () => <div>Some Component</div>

export default Component

// import Default Component
import ComponentOne from 'path/to/component'

    Hope this helps!

    Login or Signup to reply.
  3. 0

    You are attempting to import the "Button" component in your "Button.stories.js" file, which is creating the problem. Because the component is exported as the default export, it should be imported without the need of curly brackets.

    import Button from './Button';
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search