#Canvas not working in MDX doc

1 messages · Page 1 of 1 (latest)

tulip sand
#

For some reason, I am getting this error when importing a working story into and MDX file:

Invalid value passed to the ‘of’ prop. The value was resolved to a ‘component or unknown’ type but the only types for this block are: story.

MDX:

import { Meta, Canvas } from “@storybook/blocks”
import * as ContainerStories from “./container.stories”

<Meta title=“Container” />

<Canvas of={ContainerStories.ContainerExample} />
import { Container } from “./container”
import { Meta, StoryObj } from@storybook/react”

const story: Meta<typeof Container> = {
  title: “Container”,
  component: Container,
}

export default story

type Story = StoryObj<typeof Container>

export const ContainerExample: Story = {}
export const Container= ()=> <div></div>
tulip sand
#

this actually happens with any story I pass up canvas. any of these stories are indexed by storybook in the stories config of main.ts

glacial gyro
#

I really hope this isn’t it 😅, but could you rename story to something else (we recommend meta) just to make sure that’s not a protected name or something?

tulip sand
#

@glacial gyro before you sent that over, I did rename it from a stories.mdx file to a plain .mdx file, and this made it work. unsure if it's the extension or the overall name change that seems to have fixed it

#

oh I see, misunderstand your suggestion. story appears to be valid hahaha

#

so it seems that the issue was that this was a stories.mdx file, it's not clear to me what the difference is

glacial gyro
#

Oh! I didn’t notice that detail. Yeah, in Storybook 7, attached MDX files (those referencing a component’s stories) need to be named *.mdx. I thought we threw a more useful error for this case. Sorry about that.

I’m glad to know it wasn’t the dumb thing I feared. 😆