storybook: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

This is a generic error that can come from anywhere. It’s typically a user error when one tries to use a non-component as a react component.

Consider the following two snippets:

import Button from './Button';

import { Button } from './Button';

If Button is the default export then first is correct. If it’s a named export, then the second is correct. If you accidentally uses the wrong one, you’ll get this error.

Getting the same issue, were you able to resolve it?

The issue is still happening, and how can you guys just mark it closed, without a solution?

Having same problem when trying to import class-based components. No solution suggested here worked for me. I’m importing the component file directly (no index.js file) and the default import is always undefined.

Confirm this bug. Thank you for your solution!

Having same problem when trying to import class-based components. No solution suggested here worked for me. I’m importing the component file directly (no index.js file) and the default import is always undefined.

I got this error trying to setup storybook v7.2.3 as a new user on a simple demo project. I nearly gave up on storybook but thanks to [abdo99989](https://github.com/storybookjs/storybook/issues/5013#issuecomment-1462563076) I can confirm that switching my components from functional like so fixes the problem:

Fails

const Task = (props: Props) => {
  ...
};

export default Task;

Works

export default function Task(props: Props) {
  ...   
}

Is there a way to make storybook work with functional components?

This happens for me just for functional components, weird issue!

I’ve met this issue not because of bad use of import/export but because of the definition of a static property which somehow mess up with it.

RadioGroup.tsx

import React, { ReactNode, HTMLProps, createContext, useMemo, ChangeEvent } from 'react';
import { Radio } from './Radio';
import styles from './RadioGroup.m.scss';

type RadioContext = {
  name: string;
  onChange(event: ChangeEvent<HTMLInputElement>): void;
  required?: boolean;
  value: string;
} & HTMLProps<HTMLInputElement>;

type RadioGroupProps = {
  children: ReactNode;
} & RadioContext;

export const RadioContext = createContext<RadioContext>({} as RadioContext);

export function RadioGroup(props: RadioGroupProps) {
  const { children, direction, error, invalid, name, onChange, required, spread, value } = props;

  const radioContextValue = useMemo(() => ({ name, onChange, required, value }), [
    name,
    onChange,
    required,
    value,
  ]);

  return (
      <RadioContext.Provider value={radioContextValue}>{children}</RadioContext.Provider>
  );
}

RadioGroup.Radio = Radio; // <- definition of `Radio` as static property `Radio` of `RadioGroup`

when importing RadioGroup this way

RadioGroup.stories.tsx

import React, { useState } from 'react';
import { RadioGroup } from '.';

and using static property Radio :

const styleContainer = { height: '85vh', width: '99vw' };

export default {
  title: 'Kit UI/RadioGroup',
  decorators: [
    Story => (
      <div style={styleContainer}>
        <Story />
      </div>
    ),
  ],
};

export const BasicColumn = () => {
  const [value, setRadioValue] = useState('');

  function handleChange(e) {
    setRadioValue(e.currentTarget.value);
  }

  return (
    <RadioGroup direction={'column'} name="name" onChange={handleChange} value={value}>
      <RadioGroup.Radio label="Option a" value="a" /> // <-- this
      <RadioGroup.Radio label="Option b" value="b" /> // <-- or this
      <RadioGroup.Radio label="Option c" value="c" /> // <-- or this
      <RadioGroup.Radio label="Option d" value="d" /> // <-- or this
    </RadioGroup>
  );
};

I got the error.

(definition of Radio component:)

import React, { ReactNode, HTMLProps, useContext } from 'react';
import { RadioContext } from './RadioGroup';
import styles from './Radio.m.scss';

type RadioCustomProps = {
  label: ReactNode;
  value: string;
};

type RadioProps = RadioCustomProps & Omit<HTMLProps<HTMLInputElement>, keyof RadioCustomProps>;

export const Radio = (props: RadioProps) => {
  const radioContext = useContext(RadioContext);
  const { value: selectedValue, ...restContext } = radioContext;
  const { label, value } = props;

  return (
    <label className={styles.label}>
      <div className={styles.radioInputContainer}>
        <input {...restContext} checked={selectedValue === value} type="radio" value={value} />
        <div className={styles.borderCircle} />
        <div className={styles.centralCircle} />
      </div>

      {label}
    </label>
  );
};

but if I import Radio and use it error disappear:

import { RadioGroup, Radio } from '.';

const styleContainer = { height: '85vh', width: '99vw' };

export default {
  title: 'Kit UI/RadioGroup',
  decorators: [
    Story => (
      <div style={styleContainer}>
        <Story />
      </div>
    ),
  ],
};

export const BasicColumn = () => {
  const [value, setRadioValue] = useState('');

  function handleChange(e) {
    setRadioValue(e.currentTarget.value);
  }

  return (
    <RadioGroup direction={'column'} name="name" onChange={handleChange} value={value}>
      <Radio label="Option a" value="a" /> // <-- this
      <Radio label="Option b" value="b" /> // <-- or this
      <Radio label="Option c" value="c" /> // <-- or this
      <Radio label="Option d" value="d" /> // <-- or this
    </RadioGroup>
  );
};

Make sure all your storybook dependencies are using the same version! I was using the following dependencies and had the same issue:

"devDependencies": {
    "@storybook/addon-a11y": "^7.0.5",
    "@storybook/addon-essentials": "^7.0.5",
    "@storybook/addon-interactions": "^7.0.5",
    "@storybook/addon-links": "^7.0.5",
    "@storybook/nextjs": "^7.0.5",
    "storybook": "^7.0.5"
  }

Somehow, storybook was updated to 7.3.1, during a lockfile refresh of our dependency bot, while the others remained at 7.2.3.

Manually deleting node_modules (not sure if necessary), updating the deps to ^7.3.1 and doing a fresh npm install fixed the issue for me.