storybook: Cannot read properties of undefined (reading 'id')

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 <Canvas> 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>

About this issue

  • Original URL
  • State: open
  • Created 3 years ago
  • Reactions: 13
  • Comments: 17 (8 by maintainers)

Most upvoted comments

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

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