From 74eba4088d990bff208dd369f072b56105902fd4 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 15 Mar 2023 10:34:02 +0100
Subject: [PATCH 1/2] descriptive error when using of prop

---
 src/sb-mdx-plugin.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/sb-mdx-plugin.ts b/src/sb-mdx-plugin.ts
index 23511c7..f92ab23 100644
--- a/src/sb-mdx-plugin.ts
+++ b/src/sb-mdx-plugin.ts
@@ -135,6 +135,11 @@ const expressionOrNull = (attr: t.JSXAttribute['value']) =>
   t.isJSXExpressionContainer(attr) ? attr.expression : null;
 
 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;
@@ -277,6 +282,11 @@ function genCanvasExports(ast: t.JSXElement, context: Context) {
 }
 
 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;

From beb53e0bd57fd957c986f9ba00672384499066b2 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 16 Mar 2023 13:19:26 +0100
Subject: [PATCH 2/2] add unit tests

---
 src/sb-mdx-plugin.test.ts | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/sb-mdx-plugin.test.ts b/src/sb-mdx-plugin.test.ts
index 680dd00..ab35c17 100644
--- a/src/sb-mdx-plugin.test.ts
+++ b/src/sb-mdx-plugin.test.ts
@@ -802,6 +802,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';
+
+        <Meta title="Button" />
+
+        # Bad story
+
+        <Story of={MyStories.Primary} />
+      `)
+    ).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';
+
+        <Meta title="Button" of={MyStories} />
+      `)
+    ).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(