[Bug] React + SB builds, but all stories are empty and throws 404

[Patrick-Ullrich]

What version of vite are you using?

3.0.4

System info and storybook versions

System:
OS: macOS 12.4
CPU: (10) arm64 Apple M1 Pro
Binaries:
Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
Yarn: 1.22.18 - ~/.nvm/versions/node/v16.14.0/bin/yarn
npm: 8.14.0 - ~/.nvm/versions/node/v16.14.0/bin/npm
Browsers:
Chrome: 103.0.5060.134
Firefox: 102.0.1
Safari: 15.5
npmPackages:
@storybook/addon-actions: ^6.5.9 => 6.5.9
@storybook/addon-essentials: ^6.5.9 => 6.5.9
@storybook/addon-interactions: ^6.5.9 => 6.5.9
@storybook/addon-links: ^6.5.9 => 6.5.9
@storybook/builder-vite: ^0.2.2 => 0.2.2
@storybook/react: ^6.5.9 => 6.5.9
@storybook/testing-library: ^0.0.13 => 0.0.13

Describe the Bug

React-Ts + Vite

Development works just fine, but when hosting the build, stories show no content and throw a 404.

Local - yarn storybook

Hosted - yarn build-storybook output

I noticed this first on a larger project, but I get the same with a brand new project.

1. npm create vite@latest (choose react and react-ts)
2. npx sb init --builder @storybook/builder-vite

Go to package.json and remove "type": "module". (storybookjs/storybook#11587)

3. yarn storybook => everything works as expected
4. yarn build-storybook => builds fine
5. Host the dist folder.. e.g. I am using a vs code plugin to test - Live Server

See second screenshot.

Workaround

For now I am using webpack 5 builder for the build... Which is defeating the purpose but only workaround i have so far.

Link to Minimal Reproducible Example

No response

Participation

• I am willing to submit a pull request for this issue.

[IanVS]

Can you try using npx http-server ./storybook-static instead of live server, to see if that plays a role?

And by the way, you shouldn't need to remove type: module from your package.json if you rename the .storybook/main.js file to .storybook/main.cjs.

[Patrick-Ullrich]

Ah... That works. I ran into that issue also in a hosted version, but looking back i must have had something else wrong (not include everything or something...)

Thanks. 👍