[Bug]: Preview broken in v7 dev mode with web-components-vite - module is undefined

[rbardini]

Describe the bug

Storybook's preview is broken in dev mode using web-components-vite framework:

I tried mocking module in config.define and preview-head.html, but neither worked. Looks like it relates to this line:

storybook/code/lib/builder-vite/src/plugins/external-globals-plugin.ts

Line 58 in 9783bb5

await writeFile(externalCachePath, `module.exports = ${externals[externalKey]};`);

Although I also tried with v7.0.0-beta.35, which doesn't include #20698, and got the same error.

To Reproduce

I couldn't reproduce it with the Lit Vite (TS) template (might be specific to my project), but here's the command I used to initialize Storybook:

npx sb@next init --builder=vite --type web_components

System

Environment Info:

  System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.19.0/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
  Browsers:
    Chrome: 110.0.5481.177
    Safari: 16.3
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.57 => 7.0.0-beta.57 
    @storybook/addon-links: ^7.0.0-beta.57 => 7.0.0-beta.57 
    @storybook/blocks: ^7.0.0-beta.57 => 7.0.0-beta.57 
    @storybook/web-components: ^7.0.0-beta.57 => 7.0.0-beta.57 
    @storybook/web-components-vite: ^7.0.0-beta.57 => 7.0.0-beta.57

Additional context

build mode works fine.

[shilman]

Do you a have a reproduction repo you can share? Thank you! 🙏

[rbardini]

Migrating from Vite v3 to v4 fixed the issue.