[Bug]: Unable to migrate MDX stories to Storybook 7

[gabek]

Describe the bug

Hello! I'm attempting to migrate over to Storybook v7 and I'm having issues building with standalone/unattached Mdx files. I've tried all different versions of suggested syntaxes in the documentation, including the suggestion that you can drop the Meta tag completely.

Could you point me in the right direction?

Console output

npm run storybook

ModuleBuildError: Module build failed (from ./node_modules/@storybook/mdx2-csf/loader.js):
Could not parse expression with acorn: Unexpected content after expression
    at processResult (/home/gabek/src/webv2-merge/owncast/web/node_modules/webpack/lib/NormalModule.js:764:19)
    at <anonymous> (/home/gabek/src/webv2-merge/owncast/web/node_modules/webpack/lib/NormalModule.js:866:5)
    at <anonymous> (/home/gabek/src/webv2-merge/owncast/web/node_modules/loader-runner/lib/LoaderRunner.js:400:11)
    at <anonymous> (/home/gabek/src/webv2-merge/owncast/web/node_modules/loader-runner/lib/LoaderRunner.js:252:18)
    at context.callback (/home/gabek/src/webv2-merge/owncast/web/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/home/gabek/src/webv2-merge/owncast/web/node_modules/@storybook/mdx2-csf/loader.js:32:12)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

To Reproduce

The following Test.mdx reproduces the error.

Test.mdx

# Test.mdx

This is a test file.

System

Environment Info:

  System:
    OS: Linux 6.0 Pop!_OS 22.04 LTS
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
  Binaries:
    Node: 19.9.0 - ~/.local/share/nvm/v19.9.0/bin/node
    npm: 9.6.7 - ~/src/webv2-merge/owncast/web/node_modules/.bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Firefox: 108.0
  npmPackages:
    @storybook/addon-a11y: 7.0.18 => 7.0.18
    @storybook/addon-actions: 7.0.18 => 7.0.18
    @storybook/addon-docs: 7.0.18 => 7.0.18
    @storybook/addon-essentials: ^7.0.18 => 7.0.18
    @storybook/addon-links: 7.0.18 => 7.0.18
    @storybook/addon-styling: ^1.0.8 => 1.0.8
    @storybook/addon-viewport: 7.0.18 => 7.0.18
    @storybook/blocks: ^7.0.18 => 7.0.18
    @storybook/cli: 7.0.18 => 7.0.18
    @storybook/mdx2-csf: 1.1.0 => 1.1.0
    @storybook/nextjs: ^7.0.18 => 7.0.18
    @storybook/preset-scss: ^1.0.3 => 1.0.3
    @storybook/react: 7.0.18 => 7.0.18
    @storybook/testing-library: 0.1.0 => 0.1.0

Additional context

No response

[nikunp]

is there anyway to fix this?

[csantos1113]

I encountered the same (or similar) issue upgrading from 7.4.5 to 7.5.1 (or 7.5.0 for what matters)

running

storybook dev -c .storybook

shows this error in console when I try to access the storybook link for that mdx file

3:39:08 PM [vite] Internal server error: Could not parse expression with acorn: Unexpected content after expression
  Plugin: storybook:mdx-plugin
  File: /Users/cesar.santos/repositories/test/packages/introduction.mdx:undefined:undefined

Update

It seems the error I'm facing got introduced in #24166 - it works fine if I use v7.5.0-alpha.3

Update 2

I had a bit of a mess on my storybook dependencies. This fixed it for me

diff --git a/package.json b/package.json
--- a/package.json  (revision 959784332c9d9d377cbda65e002baaf893b9ab0e)
+++ b/package.json  (date 1697751750935)
@@ -19,15 +19,11 @@
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/error": "3.0.0",
     "@semantic-release/git": "10.0.1",
-    "@storybook/addon-actions": "7.5.1",
-    "@storybook/addon-docs": "7.5.1",
     "@storybook/addon-essentials": "7.5.1",
     "@storybook/addon-interactions": "7.5.1",
     "@storybook/addon-links": "7.5.1",
-    "@storybook/addons": "7.5.1",
-    "@storybook/components": "7.5.1",
-    "@storybook/core-events": "7.5.1",
-    "@storybook/node-logger": "7.5.1",
+    "@storybook/blocks": "7.5.1",
+    "@storybook/manager-api": "7.5.1",
     "@storybook/react": "7.5.1",
     "@storybook/react-vite": "7.5.1",
     "@storybook/theming": "7.5.1",
@@ -66,7 +62,7 @@
     "storybook": "7.5.1",
     "tsup": "7.2.0",
     "typescript": "5.2.2",
-    "vite": "4.4.9",
+    "vite": "4.5.0",
     "vite-plugin-tsconfig-paths": "1.3.1",
     "webpack": "5.88.2"
   },

[JReinhold]

If anyone here could create a minimal reproduction that demonstrates this behavior it would be great. You can create a StackBlitz project at storybook.new and link to it. You can also create a minimal sandbox locally, see repro docs.

Thank you! 🙏

[gabek]

It's been a while since I've tried, but I thought I'd try again with the most recent version of Storybook, and it miraculously works now.

[Cedric-ruiu]

I'm experiencing the same issue that @csantos1113 after upgrading Storybook from v7.3.2 to v7.5.x

[wtanna]

Here is a link to repro the issue for my project.

During the migration process a function of getAbsolutePath was added to the addons section of the .storybook/main.ts file. Removing that function fixed the issue for me.

In the above example if you comment out the getAbsolutePath addons and uncomment just the strings, the error goes away.

[fxckdead]

Here is a link to repro the issue for my project.

During the migration process a function of getAbsolutePath was added to the addons section of the .storybook/main.ts file. Removing that function fixed the issue for me.

In the above example if you comment out the getAbsolutePath addons and uncomment just the strings, the error goes away.

This fixed the issue for me, I just removed the getAbsolutePath for @storybook/addon-docs and the error is gone.

[ashcolor]

In my case, updating @storybook/vue3-vite from version 7.4.6 to 7.5.3 resolved the issue.

[literalpie]

I think this discussion is related. A repro was linked in the comments there.

I'm also seeing this in my Qwik framework plugin repo whenever I update past 7.5.0. Here's a repro (run yarn, yarn build, then yarn storybook)

[github-actions[bot]]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[shilman]

@literalpie thanks so much for the reproduction.

the problem is that your monorepo is using an older version of builder-vite with a newer version of addon-docs. PR #24166 moves the MDX handling out of builder-vite and into addon-docs. When you use the old builder-vite it causes the MDX to be compiled twice. So the second time it compiles, it's trying to compile JS instead of MDX, which errors.

You can see this by running the following in your project:

yarn why @storybook/builder-vite

When I nuke the lockfiles and restart, it works again.

[literalpie]

I can confirm making sure deps are in sync fixed it. Thank you!