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;