Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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" />
    </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.
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...
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;
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
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
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.