Storybook cannot read property 'displayName' of undefined

Question

I have created a new component Navbar.jsx

import { Disclosure } from '@headlessui/react'
import Image from 'next/image'
import tacoPicture from '../public/lets-taco-bout-it.png'



function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}


export const Header = () => {
  return (
    <Disclosure as="nav" className="bg-white shadow">
      {({ open }) => (
        <>
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex items-center justify-between h-16">
              <div className="flex items-center">
                <div className="flex-shrink-0">
                <Image src={tacoPicture} alt="Picture of the author" />
                </div>
              </div>
            </div>
          </div>
                
        </>
      )}
    </Disclosure>
  )
}

So, this needs to be described as a story. In my file Navbar.stories.jsx I do the following

import { Navbar } from './Navbar';

export default {
    title: 'Example/Navbar',
    component: Navbar,
  };
  
const Template = (args) => <Navbar {...args} />;

export const Default = Template.bind({});

And get the error:

I am new to storybook, however it seems to be a react issue, which I am also new to.

Answer 1

Apparently, I was importing a Navbar, my component's name is Header. Also there is a difference between export default function () {} and export const x = () => {}, which is crucial for importing.

Answer 2

Faced the same issue. What is the mistake I have done is using the wrong import. So i change this,

import { Button } from './button';

Into this

import Button from './button';

I got the idea from @Katharina's answer. thanks...

Answer 3

I was getting the same error. In my case, the problem wasn't in imports but in using styled-components' css attribute (using babel-plugin-styled-components).

<Button
  variant={"color"}
// this caused it
  css={`
    margin-right: 24px;
  `}
>

The workaround was to get rid of the css attribute by replacing the Button component with a new styled one. Like this:

const SubmitButton = styled(Button)`
    margin-right: 24px;
`;

Answer 4

I got this error, I was working on an existing react library and making/editing things by hand. The solution was to find the index.ts in the src folder and add my new components to it manually. Hope this helps someone

Answer 5

If you want to import your component using this syntax:

import { Button } from './button';

You can use named export from your button component

export { Button }

otherwise you have to import it without the curly braces like so:

import Button from './button';

you can read more about named vs default exports here:

https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

also this article has a nice explanation:

https://medium.com/@timoxley/named-exports-as-the-default-export-api-670b1b554f65