Storybook Cannot read properties of undefined (reading 'type')

Question

I'm quite new in React and I'm now trying to use Storybook. I run into the error below when I use npm run storybook. I've made attempts at figuring it out, but I'm still unsure.

Cannot read properties of undefined (reading 'type') TypeError: Cannot read properties of undefined (reading 'type')

at isMdx (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:3504:30)
at mdxToJsx (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:3508:8)
at jsxDecorator (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:3545:19)
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:9896:21
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:19890:12
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:19939:14
at wrapper (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:7412:12)
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:10411:14
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:10425:26
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:9896:21

It seems like is something wrong with vendors-node_modules, but does anyone know how to fix this?

Freud

Answer 1

For me I had the same error in an MDX story definition with args and a Template - but a completely different root cause (I was not using argTypes, just args)

In my case it was a basic js mistake - resulting in a not-too-explicit error!

I had added a new line after the return and not wrapped my returned component with ( ) (eg. this):

export const Template = ({ ... }) => {
  return <div/>;  // works
};

export const Template = ({ ... }) => {
  return (
    <div/>
  );  // works
};

export const Template = ({ ... }) => {
  return
    <div/>;  // does NOT work
};

As above, shows "Cannot read properties of undefined (reading 'type')" in the rendered story page

(Clearly just user error, not specific to Storybook or MDX, but including info here as another possible solution for anyone who arrives here but the above solution does not apply)

Landan

This answer helped me out. I tried to write my story template as a oneliner with an implicit return which didn't work. So after looking at yours, I added a return statement and bam it worked. thanks! – Attica

The larger reason for this issue is a javascript language feature called "automatic semicolon insertion" - certain keywords, like return, are at risk for bugs like the one you described. What happened is clear if you transform your third example as the compiler will: ``` export const Template = ({ ... }) => { return; <div/>; }; ``` – Babita

Interesting to know what was actually going on and why @Babita - thanks! – Landan

Answer 2

The TypeError: Cannot read properties of undefined (reading 'type') exception occurs in storybook when one defines the argTypes in the default export object while not defining a 'type' for each argument type.

Essentially, storybook will look at each prop defined in your argTypes and try to use a type property off it:

export default {
  title: 'Components/Video',
  component: Video,
  argTypes: {
    title: { type: 'string', defaultValue: 'Why is type undefined?' }
  }
};

Solution: don't use argTypes unless you want to define each prop type; hence the name argTypes.

Alternatively, you can omit the argTypes and just have:

export default {
  title: 'Components/Video',
  component: Video
};

Then when you define the template:

const Template: ComponentStory<typeof Video> = (args: VideoProps) => <Video {...args} />;

export const Default = Template.bind({});
Default.args = {
  title: 'Video Title'
};

If you use TypeScript, Storybook not only has ComponentStory<typeof Component> it also exports a ComponentMeta<typeof Component> types.

The same solution as above but completely TS:

import React from 'react';
import { Video } from './video';
import type { ComponentMeta, ComponentStory } from '@storybook/react';
import type { VideoProps } from './video';

const video: ComponentMeta<typeof Video> = {
  title: 'Components/Video',
  component: Video,
  argTypes: {
    title: { type: 'string', defaultValue: 'Why is type undefined?' }
  }
};

export default video;

const Template: ComponentStory<typeof Video> = (args: VideoProps) => <Video {...args} />;

export const Default = Template.bind({});
Default.args = {
  title: 'Video Title'
};

Girasol

Answer 3

For me, it was a pair of curly brackets :/ When I had imported my component it was like {myComponent} I removed the curly brackets and it was fine

Tudor