storybook: [Bug]: ReferenceError: mdx is not defined

Describe the bug

When a new project is based on Vite, React, TypeScript, StoryBook, and the storybook files have stories.mdx extensions, at the console reference error during the running storybook. The mdx story isn’t shown.

To Reproduce

1. npm create vite@latest (base on react and typescript)
2. npm install @storybook/builder-vite --save-dev
3. npx storybook init   
4. npm run storybook

System

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
  Binaries:
    Node: 16.15.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 109.0.5414.120
    Edge: Spartan (44.19041.1266.0), Chromium (109.0.1518.78)

Additional context

If the project based on CRA it is working correct.

About this issue

Original URL
State: closed
Created a year ago
Comments: 15 (7 by maintainers)

Most upvoted comments

Looks like this is going to get fixed in builder-vite: https://github.com/storybookjs/builder-vite/issues/557

Narretz on Feb 10, 2023

For me it was legacyMdx1: true, everything is working fine when I removed it.

DzmVasileusky on Jun 13, 2023

@endorphines

did remove the field below work for you?
// main.ts
  "features": {
    "storyStoreV7": true
  }
not tested!

I have tried this one as well but didnt work 😦

donghoon-song on Feb 10, 2023

@zhyd1997

yeah tried that as well. Didn’t work.

endorphines on Feb 10, 2023

Same here. I know @zhyd1997 will tell me to upgrade but for some of us, we can’t just upgrade (yet). So if we can get a fix or even a workaround for this will be helpful 😦

endorphines on Feb 10, 2023