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

[alun-430]

E

E

l

e

ment type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of Strategy.
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of Strategy.
at invariant (http://localhost:6006/static/iframe.bundle.js:24211:15)
at createFiberFromTypeAndProps (http://localhost:6006/static/iframe.bundle.js:34114:11)
at createFiberFromElement (http://localhost:6006/static/iframe.bundle.js:34135:15)
at createChild (http://localhost:6006/static/iframe.bundle.js:37304:28)
at reconcileChildrenArray (http://localhost:6006/static/iframe.bundle.js:37555:25)
at reconcileChildFibers (http://localhost:6006/static/iframe.bundle.js:37878:14)
at reconcileChildren (http://localhost:6006/static/iframe.bundle.js:38234:28)
at updateHostComponent (http://localhost:6006/static/iframe.bundle.js:38579:3)
at beginWork (http://localhost:6006/static/iframe.bundle.js:39243:14)
at performUnitOfWork (http://localhost:6006/static/iframe.bundle.js:41976:12)

[praneybehl]

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

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[minardimedia]

What is the solution for this issue?

[vivek-kandhvar]

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

[rennehir]

Anyone figured this out?

[callumacrae]

Getting this too, did anyone figure out a solution?

[shilman]

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.

[emmanuelsio]

import { Button } from './Button';

thanks, is the right answer

[ghost]

Thank you!

[hallya]

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>
  );
};