When importing .mdx file in a .stories.tsx file: Unexpected FunctionDeclaration in code: only import/exports are supported

[raDiesle]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

3.0.1

Link to runnable example

CRA with Webpack and storybook 8.1.3

Steps to reproduce

1. migrate to storybook v 8.1.3 and configure loader:
   config!.module!.rules!.push({
   test: /.mdx$/,
   use: [
   { loader: 'babel-loader', options: {} },
   {
   loader: '@mdx-js/loader',
   /** @type {import('@mdx-js/loader').Options} */
   options: {},
   },
   ],
   });

Import a mdx file into a stories.tsx file
such as

import Usage from './usage.mdx';

Expected behavior

No compile error like it was with version 7.6.17 of Storybook

Actual behavior

ERROR in ./src/all_stories/inputs/input-file/usage.mdx
Module build failed (from ../../../.yarn/berry/cache/@storybook-addon-docs-npm-8.1.3-45c056d9b8-10c0.zip/node_modules/@storybook/addon-docs/dist/mdx-loader.js):
Unexpected FunctionDeclaration in code: only import/exports are supported
@ ./src/all_stories/ lazy ^./.$ include: (?%21.node_modules)(?:/src/all_stories(?:/(?%21.)(?:(?:(?%21(?:^%7C/).).)?)/%7C/%7C$)(?%21.)(?=.)[^/]?.mdx)$ chunkName: [request] namespace object ./inputs/input-file/usage.mdx
@ ./storybook-stories.js 10:11-14:5
@ ./storybook-config-entry.js 6:0-50 18:31-39 25:2-28:4 25:58-28:3 27:31-39

Runtime

Node v21

Package manager

yarn v4

OS

macOS

Build and bundle tools

Create React App

[raDiesle]

I carefully read https://mdxjs.com/docs/troubleshooting-mdx/#unexpected-type-in-code-only-importexports-are-supported
Does it mean I cannot have a stories.mdx file and import multiple mdx contents to be combined to render, anylonger with new version?

[ChristianMurphy]

Welcome @raDiesle!

Taking a step back first.

1. Storybook natively supports MDX in its story format https://storybook.js.org/docs/writing-docs/mdx Don't write a custom integration, use the official one used and tested by millions of other people.
2. CRA is deprecated and no longer supported by the CRA team (source: Replace Create React App recommendation with Vite reactjs/react.dev#5487 (comment)) consider moving to Vite, Remix, or Next.

To answer your direct question,
it's likely a configuration or a content problem.
People would also need to see the MDX you are trying to render to offer better insights.

Does it mean I cannot have a stories.mdx file and import multiple mdx contents to be combined to render, anylonger with new version?

No. MDX can still import any number of external sources.

[raDiesle]

Ok, thanks!

Seems like renaming to .stories removes the error of Storybook, still not clear why when debugging the builders.