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

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 2

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.