[Bug]: ReferenceError: mdx is not defined

[krakadet]

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.

[krakadet]

The project has typical settings.
.storybook/main.cjs

vite.config.ts

[donghoon-song]

same issue

[zhyd1997]

Hi @krakadet @donghoon-song

Try to upgrade the Storybook to v7 beta:

npm create vite@latest # base on react and typescript
npm install @storybook/builder-vite@next --save-dev # next version
npx storybook@next init   # next version
npm run storybook

beta-45 works for me!

Environment Info:

  System:
    OS: macOS 13.1
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Safari: 16.2
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.45 => 7.0.0-beta.45 
    @storybook/addon-interactions: ^7.0.0-beta.45 => 7.0.0-beta.45 
    @storybook/addon-links: ^7.0.0-beta.45 => 7.0.0-beta.45 
    @storybook/blocks: ^7.0.0-beta.45 => 7.0.0-beta.45 
    @storybook/builder-vite: ^7.0.0-beta.45 => 7.0.0-beta.45 
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1 
    @storybook/vue3: ^7.0.0-beta.45 => 7.0.0-beta.45 
    @storybook/vue3-vite: ^7.0.0-beta.45 => 7.0.0-beta.45 

[Ttou]

same issue

[zhyd1997]

@Ttou

see here: #21023 (comment)

[endorphines]

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 :(

[zhyd1997]

@endorphines

did remove the field below work for you?

// main.ts
  "features": {
    "storyStoreV7": true
  }

not tested!

[endorphines]

@zhyd1997

yeah tried that as well. Didn't work.

[zhyd1997]

maybe some deps broken, need to ping deep deps specific version 👀

not sure!

[donghoon-song]

@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 :(

[Narretz]

Looks like this is going to get fixed in builder-vite: storybookjs/builder-vite#557

[shilman]

@IanVS is this handled with our most recent set of changes?

[IanVS]

Yes, although because of the way we depend on next tag in our package.json, it may be necessary to remove node_modules and regenerate the lock file. @shilman what would you think about being a bit more explicit in our version and requiring @storybook/mdx1-csf@>=1.0.0-next.1, though I think you try to avoid that.

[IanVS]

This issue looks like it is actually about the 6.5 builder. The fix has been released there, so please update to the latest 0.4.x, and open an issue in https://github.com/storybookjs/builder-vite if you're still having issues.

[DzmVasileusky]

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