Storybook: build-storybook generates invalid root paths for scripts and static files

Created on 26 Apr 2019  路  2Comments  路  Source: storybookjs/storybook

Describe the bug
When running build-storybook with Storybook 5.0.10, the paths in iframe.html to javascript assets and static/media assets have an extra / in them which makes the static storybook output not viewable. This was not a problem with Storybook 3.

To Reproduce

  1. Run build-storybook -c .storybook -o build/storybook,
  2. Try to open the generated static site in the browser using a file:// path, e.g. file:///Users/myuser/storybookdemo/build/storybook/index.html
  3. In iframe.html there is <script src="/runtime~main.HASH.bundle.js"> which will fail because that translates to file:///runtime~main.HASH.bundle.js which is obviously wrong. index.html has the right path.
  4. Also in main.HASH.js there are paths like __webpack_require__.p+"static/media/my.svg which cause load to file:///static/media/my.svg.

Expected behavior
Paths in the output folder should work so that the folder works standalone. This was the behaviour in storybook 3.

I have to now resort to this sed trickery to fix the problem:

#! /bin/bash
sed -i.bak -e 's/src="\//src="/g' build/storybook/*.html
sed -i.bak -e 's/__webpack_require__\.p+"static\/media/"static\/media/g' build/storybook/*.js
rm build/storybook/*.bak

but would obviously rather have this fixed in storybook.

cli question / support

Most helpful comment

Well don't I feel bad, I had defaultConfig.output.publicPath = "/"; in my .storybook/webpack.config.js by accident. That setting apparently affects paths in iframe.html and generated javascript bundle, but not the paths in index.html.

Sorry for the noise.

All 2 comments

@ttiurani Is this a problem in our example storybooks also? doesn't appear to be. E.g. https://monorepo-lpctgf347.now.sh/examples/html-kitchen-sink/iframe.html?id=welcome--welcome

Well don't I feel bad, I had defaultConfig.output.publicPath = "/"; in my .storybook/webpack.config.js by accident. That setting apparently affects paths in iframe.html and generated javascript bundle, but not the paths in index.html.

Sorry for the noise.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

sakulstra picture sakulstra  路  3Comments

purplecones picture purplecones  路  3Comments

zvictor picture zvictor  路  3Comments

rpersaud picture rpersaud  路  3Comments

tomitrescak picture tomitrescak  路  3Comments