builder-vite: build-storybook to subfolder results in 404 from iframe.html

Failed to load resource: the server responded with a status of 404

/assets/vendor.[hash].js /assets/iframe.[hash].js /assets/iframe.[hash].css

To reproduce:

npx build-storybook  --output-dir build/docs
npx serve@latest build

Browse to http://localhost:3000/docs/

Cause:
in the generated build/docs/iframe.html these assets are loaded via absolute urls: src="/assets/...

Possible fix:. Generate relative urls: src="assets/... (no leading slash)

Workaround: Running a post build script:

const fs = require('fs');
const filename = 'build/docs/iframe.html';
let html = fs.readFileSync(filename, "utf8");
html = html.replaceAll('"/assets/', '"assets/'); 
fs.writeFileSync(filename, html);
// repeat for other files that use /assets/ urls.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 19 (11 by maintainers)

Most upvoted comments

Thanks!

  viteFinal(config) {
    config.base = ''; //  './' also works, but i like "assets/.." urls better than "./assets/..." urls.
    return config;
  },

works in both start-storybook & build-storybook, should base: '' be the new default for storybook-builder-vite?

bfanger on Feb 11, 2022

Is this helpful? https://github.com/eirslett/storybook-builder-vite/issues/96#issuecomment-1016548429

Essentially, I think you need to set the base for vite, so it knows that you have a nested directory.

IanVS on Feb 11, 2022

OK that’s fair. I think we can update the default base in storybook 7.0. I’m reluctant to change it in 6.5, in case anyone is relying on the current default.

IanVS on Oct 4, 2022

Is this documented anywhere, new to vite and spent a long time trying to filter out irrelevant webpack config + storybook threads until I luckily found this. Happy its an easy fix, maybe I missed

coreybruyere on Aug 5, 2022

I don’t have an strong opinions. I think it might be worth keeping an eye on in case we get repeat reports.

joshwooding on Feb 17, 2022