diff --git a/MIGRATION.md b/MIGRATION.md
index 5d59a0f3c0f2..aadd391e20b5 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1097,6 +1097,8 @@ import * as ComponentStories from './some-component.stories';
```
+(Note the `of` prop is only supported if you change your MDX files to plain `.mdx`, it's not supported in `.stories.mdx` files)
+
You can create as many docs entries as you like for a given component. By default the docs entry will be named the same as the `.mdx` file (e.g. `Introduction.mdx` becomes `Introduction`). If the docs file is named the same as the component (e.g. `Button.mdx`, it will use the default autodocs name (`"Docs"`) and override autodocs).
By default docs entries are listed first for the component. You can sort them using story sorting.
@@ -1119,7 +1121,7 @@ Additionally to changing the docs information architecture, we've updated the AP
**General changes**
-- Each block now uses `of={}` as a primary API -- where the argument to the `of` prop is a CSF or story _export_.
+- Each block now uses `of={}` as a primary API -- where the argument to the `of` prop is a CSF or story _export_. The `of` prop is only supported in plain `.mdx` files and not `.stories.mdx` files.
- When you've attached to a CSF file (with the `Meta` block, or in Autodocs), you can drop the `of` and the block will reference the first story or the CSF file as a whole.
diff --git a/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts b/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts
index 7b33d5429ad1..071d2ccf1d59 100644
--- a/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts
+++ b/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts
@@ -12,6 +12,7 @@ import type {
} from '@storybook/types';
import type { Channel } from '@storybook/channels';
+import dedent from 'ts-dedent';
import type { StoryStore } from '../../store';
import { prepareMeta } from '../../store';
import type { DocsContextProps } from './DocsContextProps';
@@ -85,7 +86,9 @@ export class DocsContext implements DocsContextProps
referenceMeta(metaExports: ModuleExports, attach: boolean) {
const resolved = this.resolveModuleExport(metaExports);
if (resolved.type !== 'meta')
- throw new Error('Cannot reference a non-meta or module export in ');
+ throw new Error(
+ ' must reference a CSF file module export or meta export. Did you mistakenly reference your component instead of your CSF file?'
+ );
if (attach) this.attachCSFFile(resolved.csfFile);
}
@@ -160,11 +163,12 @@ export class DocsContext implements DocsContextProps
if (validTypes.length && !validTypes.includes(resolved.type as TType)) {
const prettyType = resolved.type === 'component' ? 'component or unknown' : resolved.type;
- throw new Error(
- `Invalid value passed to the 'of' prop. The value was resolved to a '${prettyType}' type but the only types for this block are: ${validTypes.join(
- ', '
- )}`
- );
+ throw new Error(dedent`Invalid value passed to the 'of' prop. The value was resolved to a '${prettyType}' type but the only types for this block are: ${validTypes.join(
+ ', '
+ )}.
+ - Did you pass a component to the 'of' prop when the block only supports a story or a meta?
+ - ... or vice versa?
+ - Did you pass a story, CSF file or meta to the 'of' prop that is not indexed, ie. is not targeted by the 'stories' globs in the main configuration?`);
}
switch (resolved.type) {