diff --git a/src/index.test.ts b/src/index.test.ts index 97b4762..389a5e0 100644 --- a/src/index.test.ts +++ b/src/index.test.ts @@ -1233,6 +1233,34 @@ describe('docs-mdx-compiler-plugin', () => { ).rejects.toThrow('Expected a Story name, id, or story attribute'); }); + it("errors on story 'of' prop", async () => { + await expect(async () => + clean(dedent` + import * as MyStories from './My.stories'; + import { Story, Meta } from '@storybook/addon-docs'; + + + + # Bad story + + + `) + ).rejects.toThrow(`The 'of' prop is not supported in .stories.mdx files, only .mdx files. + See https://storybook.js.org/docs/7.0/react/writing-docs/mdx on how to write MDX files and stories separately.`); + }); + + it("errors on meta 'of' prop", async () => { + await expect(async () => + clean(dedent` + import * as MyStories from './My.stories'; + import { Meta } from '@storybook/addon-docs'; + + + `) + ).rejects.toThrow(`The 'of' prop is not supported in .stories.mdx files, only .mdx files. + See https://storybook.js.org/docs/7.0/react/writing-docs/mdx on how to write MDX files and stories separately.`); + }); + describe('csf3', () => { it('auto-title-docs-only.mdx', () => { expect( diff --git a/src/sb-mdx-plugin.ts b/src/sb-mdx-plugin.ts index eddf188..093c6da 100644 --- a/src/sb-mdx-plugin.ts +++ b/src/sb-mdx-plugin.ts @@ -122,6 +122,11 @@ const expressionOrNull = (attr: t.JSXAttribute['value']) => t.isJSXExpressionContainer(attr) ? attr.expression : null; export function genStoryExport(ast: t.JSXElement, context: Context) { + if (getAttr(ast.openingElement, 'of')) { + throw new Error(`The 'of' prop is not supported in .stories.mdx files, only .mdx files. + See https://storybook.js.org/docs/7.0/react/writing-docs/mdx on how to write MDX files and stories separately.`); + } + const storyName = idOrNull(getAttr(ast.openingElement, 'name')); const storyId = idOrNull(getAttr(ast.openingElement, 'id')); const storyRef = getAttr(ast.openingElement, 'story') as t.JSXExpressionContainer; @@ -264,6 +269,11 @@ export function genCanvasExports(ast: t.JSXElement, context: Context) { } export function genMeta(ast: t.JSXElement, options: CompilerOptions) { + if (getAttr(ast.openingElement, 'of')) { + throw new Error(`The 'of' prop is not supported in .stories.mdx files, only .mdx files. + See https://storybook.js.org/docs/7.0/react/writing-docs/mdx on how to write MDX files and stories separately.`); + } + const titleAttr = getAttr(ast.openingElement, 'title'); const idAttr = getAttr(ast.openingElement, 'id'); let title = null;