Storybook: Static Storybook doesn't load in Firefox or Safari due to `TypeError: Invalid scheme`

[codycoats]

Describe the bug
Using [email protected] the static storybook from yarn build-storybook works in Chrome, but does not load in Firefox or Safari.

Firefox: TypeError: URL constructor: null/{...}storybook-repro-repo/storybook-static/iframe.html is not a valid URL.

Safari: TypeError: Invalid scheme

The storybook loads, but the iframe containg the story stays at the loading state:

To Reproduce
Steps to reproduce the behavior:

1.) Build storybook yarn build-storybook
2.) Open output static-storybook/index.html in a browser other than Chrome.
3.) Stories do not load; console has error.

Made a repo using npx sb init that has this issue: https://github.com/codycoats/storybook-repro-repo

Expected behavior
Expect static storybook to load.

System:

❯ npx sb@next info

Environment Info:
  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
  Binaries:
    Node: 10.21.0 - ~/.nvm/versions/node/v10.21.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v10.21.0/bin/npm
  Browsers:
    Chrome: 84.0.4147.125
    Safari: 13.1.2
  npmPackages:
    @storybook/addon-actions: ^6.0.12 => 6.0.12 
    @storybook/addon-essentials: ^6.0.12 => 6.0.12 
    @storybook/addon-links: ^6.0.12 => 6.0.12 
    @storybook/react: ^6.0.12 => 6.0.12 

Additional context
Found a similar issue https://github.com/storybookjs/storybook/issues/10227 but it was not for the static output.

[shilman]

Looks like opening files broke in 6.0.

Verified that this still works when you serve the site locally using npx http-server

[ndelangen]

This is really strange, this only happens in Firefox?

[shilman]

Safari also, didn't test FF

[codycoats]

This happens in Firefox as well. Screenshot attached.
The null at the beginning of the path in the Error message seemed suspicious; but I don't have the familiarity with how it supposed to work.

[codycoats]

@shilman Can we keep this issue open since its been duplicated and is a feature regression?

[ridesz]

I think the problem is somewhere in the following file:

https://github.com/storybookjs/storybook/blob/5a257808c3fdf03b34c47bded5b9d1472e03e17e/lib/channel-postmessage/src/index.ts#L232-L236

I get different objects in Chrome and in Firefox when I debug the new URL(...) part.

In Chrome can I see a proper origin value:

But in Firefox there is a null value in the origin prop:

[JohannesBe]

Same problem here, 6.0.28

[ssuettenbach]

So I had the same problem and found a temporary (!!) fix.
After building the storybook you need to open the generated file that is mentioned in the console-error.
It is something like _vendords~main.[...].bundle.js_ then search for the following text:
exports.getSourceType = function getSourceType (source, refId) {
source is a string. In Firefox there is a "null" in the beginning. So doing the following fixed it for me at least in FF

if(source.includes("null/")) source = source.slice(5,-1)

Do that right as the first thing in the method removes the "null/" from the begining of the otherwise correct route only if it exists.

Couldn't test it in Safari as I'm working on a Windows.
Please feel free to adjust this little slice to your liking.

Remember: The changed file will be overwritten on build. You have to add the fix after every build!