[Bug]: vite with pnpm code block styles not applied

[adrianaferrugento]

Describe the bug

When using MDX code blocks storybook isn't styling them accordingly. I realised this is an issue with pnpm. When I install and run with yarn everything looks as it's supposed to. Also this is only a problem in dev mode, if I build and serve with pnpm all works as expected.

``` pnpm i ```

Expected

What is rendered

To Reproduce

https://stackblitz.com/edit/github-mdv2w7?file=src%2FConfigure.mdx&preset=node

System

Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
  npmPackages:
    @storybook/addon-essentials: ^7.4.0 => 7.4.0 
    @storybook/addon-interactions: ^7.4.0 => 7.4.0 
    @storybook/addon-links: ^7.4.0 => 7.4.0 
    @storybook/addon-onboarding: ^1.0.8 => 1.0.8 
    @storybook/blocks: ^7.4.0 => 7.4.0 
    @storybook/react: ^7.4.0 => 7.4.0 
    @storybook/react-vite: ^7.4.0 => 7.4.0 
    @storybook/testing-library: ^0.2.0 => 0.2.0

Additional context

No response

[adrianaferrugento]

FYI this was fixed when I manually installed the package @mdx-js/react

[ershisan99]

Thanks for the workaround, I was starting to lose my mind here. The issue seems to be related to pnpm not resolving the @mdx-js/react correctly for some reason, manually installing it did the trick for now

[andersonba]

it didn't work here 😞

[adrianaferrugento]

I'm back to having the same issue as well, there might be other dependencies that we are missing..

[dwightjack]

@adrianaferrugento I had the same issue and in my case pinning the version to ^2.3.0 worked:

pnpm i @mdx-js/react@^2.3.0 -D

[dwightjack]

@JReinhold for reference, here is a reproduction repository with a clean install of vite, vue3 and storybook 7.6.10.

https://github.com/dwightjack/demo-storybook-docs

My environment:

Storybook Environment Info:

  System:
    OS: macOS 12.7.2
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.18.1 - ~/Library/Caches/fnm_multishells/16392_1705818470615/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/16392_1705818470615/bin/yarn
    npm: 9.8.1 - ~/Library/Caches/fnm_multishells/16392_1705818470615/bin/npm
    pnpm: 8.5.0 - ~/Library/Caches/fnm_multishells/16392_1705818470615/bin/pnpm <----- active
  Browsers:
    Chrome: 120.0.6099.234
    Edge: 120.0.2210.144
    Safari: 17.2.1
  npmPackages:
    @storybook/addon-essentials: ^7.6.10 => 7.6.10
    @storybook/addon-interactions: ^7.6.10 => 7.6.10
    @storybook/addon-links: ^7.6.10 => 7.6.10
    @storybook/blocks: ^7.6.10 => 7.6.10
    @storybook/test: ^7.6.10 => 7.6.10
    @storybook/vue3: ^7.6.10 => 7.6.10
    @storybook/vue3-vite: ^7.6.10 => 7.6.10
    storybook: ^7.6.10 => 7.6.10