Cannot read properties of undefined (reading 'id')

[tibdev78]

Hi everyone,
I'm using @storybook/vue to make my storybook and I'm trying to embed a view component in my mdx files but I get these errors:
"Cannot read properties of undefined (reading 'id')" and "The above error occurred in the component".
I've been looking for a solution on different forums but I can't find it.
Does anyone have a solution?

my code :
button.docs.mdx

import { Canvas, Meta, Story } from '@storybook/addon-docs';
import Table from "@/stories/stories-component/Table.vue";

<Meta title="Bootstrap Custom Button Documentation" />

# Test

<Canvas>
    <Story name="test table">
        {() => {
            return {
                components: { Table },
                template: `<Table></Table>`
            };
        }}
    </Story>
</Canvas>

Table.vue

<template>
    <p>test component </p>
</template>
<script>
export default {
    name:"Table",
    props: {}
}
</script>

[stale]

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!

[lauthieb]

Hi! We have the same problem on https://github.com/decathlon/vitamin-web, I just watch this issue :)

[shilman]

@lauthieb can you tell me how to repro it in vitamin-web?

[lauthieb]

@lauthieb can you tell me how to repro it in vitamin-web?

Thanks @shilman. Yes for sure!

To reproduce (you will need to use yarn):

• git clone https://github.com/decathlon/vitamin-web.git
• yarn && yarn build
• cd packages/showcases/vue
• yarn start

Then go to http://localhost:6010, you will see our Storybook Vue. It works on " but not on "Docs" tab, we have a white screen with this error:

Thanks a lot in advance for your help! 💌

[tibdev78]

Solution found, it's because my file had this format component.mdx instead of components.stories.mdx

[lauthieb]

@tibdev78 okay, good news for you!!
For us, we only have xxx.stories.js files so I think it's still not working :(

[shilman]

@lauthieb hmm your example is working on my machine -- perhaps it's browser-related? if you can create an isolated repro, that would make it much easier to debug. 🙏

[lauthieb]

@shilman oh that's weird because it doesn't work in production also: https://decathlon.github.io/vitamin-web/@vtmn/showcase-vue/?path=/docs/components-vtmnbutton--overview
Did you click on "Docs" tab instead of "Canvas"?
Okay for repro, I'll try to do it next week :)

[shilman]

@lauthieb Is it only for statically built storybook?

[lauthieb]

@shilman it doesn't work also when I start it in development mode. That's what your question meant?

[RageCrezz]

@tibdev78 okay, good news for you!! For us, we only have xxx.stories.js files so I think it's still not working :(

I am facing the same issue. It seems that inputs are not being passed correctly, whenever you're intending to import an MDX file into the actual <componentName>.stories.ts file.

I was able to reproduce the solution by simply changing the names of the files, and Storybook seems to import the MDX file correctly without the error when excluding the stories.js | stories.ts file. - I've yet not found a solution to importing the MDX file correctly into the main stories file. Wish it would be easy to work with MDX files at this point :)

I've also figured that the component seems to not be rendered at all, when trying to include an <ArgsTable /> as well.

Anyone out there who fixed this?

[coderfin]

The solution for me was to include certain addons instead of relying on @storybook/addon-essentials.

My guess is that @storybook/addon-essentials configures the addons with different defaults than the individual addons or there is some sort of race condition that is resolved by including the addons individually. I'm not really sure.

My main.js:

...
module.exports = {
  ...
  addons: [
    // https://github.com/storybookjs/storybook/tree/main/addons/essentials#configuration
    // Note: These individual addons needed.
    '@storybook/addon-actions',
    '@storybook/addon-docs',
    '@storybook/addon-controls',

    // Contains docs, actions, controls, viewport, toolbar, and globals
    '@storybook/addon-essentials',
    ...
  ],
  ...
}
...

[cgreene-st]

@coderfin you absolute genius!

This solved the issue I was seeing too. I'm not sure why this is happening though, looking the @storybook/addon-essentials script, all it's doing is orchestrating all the plugins to be added but not adding any config of it's own. There could be some subtlety I'm missing here thought.

I might try update to the latest version (currently on v6.5.3) to see if it's fixed in a patch release, but this helped me for now.

[cgreene-st]

Ok for posterity for anyone else that comes across this, when I upgraded to v6.5.9 (latest at the time of comment) the issue went away and I didn't have to override the config with adding @storybook/addon-docs'. So my addons config went from

...
module.exports = {
  ...
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-essentials',
    // @storybook/addon-knobs has been deprecated need to remove over time
    '@storybook/addon-knobs',
    'storybook-addon-designs',
    ...
  ],
  ...
}
...

To this:

...
module.exports = {
  ...
  addons: [
    // '@storybook/addon-docs', <!-- removed now that I updated to the latest release --> 
    '@storybook/addon-essentials',
    // @storybook/addon-knobs has been deprecated need to remove over time
    '@storybook/addon-knobs',
    'storybook-addon-designs',
    ...
  ],
  ...
}
...

[hamedafarag]

I am still even facing this issue with Storybook 7.0.18, the following is the setup I am trying to use with a monorepo repository using lerna

/** @type { import('@storybook/react-vite').StorybookConfig } */
const config = {
  stories: [
    "../stories/Readme.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)",
    "../packages/**/*.stories.@(js|jsx|ts|tsx|mdx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  staticDirs: ["./public"],
  typescript: {
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      compilerOptions: {
        allowSyntheticDefaultImports: false,
        esModuleInterop: false,
      },
      propFilter: () => true,
    },
  },
};
export default config;

and here is a sample story

import { Meta } from "@storybook/blocks";

<Meta title="UI/My UI" />

# My UI Framework

[hamedafarag]

I am still even facing this issue with Storybook 7.0.18, the following is the setup I am trying to use with a monorepo repository using lerna

/** @type { import('@storybook/react-vite').StorybookConfig } */
const config = {
  stories: [
    "../stories/Readme.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)",
    "../packages/**/*.stories.@(js|jsx|ts|tsx|mdx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  staticDirs: ["./public"],
  typescript: {
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      compilerOptions: {
        allowSyntheticDefaultImports: false,
        esModuleInterop: false,
      },
      propFilter: () => true,
    },
  },
};
export default config;

and here is a sample story

import { Meta } from "@storybook/blocks";

<Meta title="UI/My UI" />

# My UI Framework

I Also Noticed something, if i changed the title value ` to any title while running the storybook in development mode, a new item in the menu appeared and works fine and the old title still remained in the menu with the same issue, but if I stopped the storybook and start it again, the new title only will appear and with the same issue.

[seanabrookes]

Had similar issue over the last few days trying to upgrade to SB7. (v^7.4.0)
Very similar to above - race condition like behaviour i.e. I would get it working then it would throw

Cannot read properties of undefined (reading 'id')

seems there is still contention around which is correct naming for an intro mdx file:

intro.mdx  // from what I understand this is the correct SB7 convention?

or

intro.stories.mdx. // legacy

it seemed to switch back and forth throwing the error after running

pnpm run build-storybook
pnpm run storybook

The 'fix' for me was to run the .stories.mdx to MDX+CSF migration script again which removed the .stories from the mdx file name and works without throwing the error. I'm expecting the error to come back after running the build again but my hypothesis is that the migration script will fix things

npx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx"

my main.js

module.exports = {
  "stories": [
    "../packages/analytics-home/src/intro.mdx",
    "../packages/*/src/**/*.mdx",
    "../packages/*/src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    // "@storybook/addon-links", 
    "@storybook/addon-essentials", 
    // "@storybook/addon-mdx-gfm"
  ],
  "framework": {
    name: "@storybook/vue3-webpack5",
    options: {}
  },
  docs: {
    autodocs: true
  }
};