Storybook 无法读取未定义的属性“displayName”

Question

我创建了一个新组件 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>
  )
}

所以，这需要用一个故事来描述。在我的文件 Navbar.stories.jsx 中，我执行以下操作

import { Navbar } from './Navbar';

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

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

并得到错误：

我是故事书的新手，但这似乎是一个反应问题，我也是新手。

Answer 1

面临同样的问题。我犯的错误是使用了错误的导入。所以我改变这个，

import { Button } from './button';

进入这个

import Button from './button';

我从@Katharina 的回答中得到了这个想法。谢谢...

Answer 2

显然，我正在导入一个导航栏，我的组件名称是 Header。export default function () {}和之间也存在差异export const x = () => {}，这对于导入至关重要。