[Bug]: Opening storybook-static/index.html in browser does not work anymore in v7

[FlorianChristie]

Describe the bug

When trying to open the output generated from storybook build (storybook-static/index.html) in Chromium (or Chrome or Firefox) only a blank page is shown. The console errors suggest that this is a problem with the CORS policy:
Access to script at 'file:///home/username/test-sb/storybook-static/sb-manager/runtime.mjs' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

When starting Chromium with disabled web security (chromium --disable-web-security --user-data-dir="[storybook-test]") the storybook can be opened.
Is there any way to get this running again without having to start Chromium in this mode? We did rely on this as we do not deploy our storybook anywhere but rather just archive the static files.

To Reproduce

mkdir test-sb && cd test-sb
npm init
npm install react react-dom
npx sb init
npm run build-storybook
Open /home/username/test-sb/storybook-static/index.html in Chromium

System

Environment Info:

  System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.49
    Firefox: 112.0
  npmPackages:
    @storybook/addon-essentials: ^7.0.2 => 7.0.2 
    @storybook/addon-interactions: ^7.0.2 => 7.0.2 
    @storybook/addon-links: ^7.0.2 => 7.0.2 
    @storybook/blocks: ^7.0.2 => 7.0.2 
    @storybook/react: ^7.0.2 => 7.0.2 
    @storybook/react-webpack5: ^7.0.2 => 7.0.2 
    @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2

Additional context

No response

[mkosir]

Same issue happening for me, its quite blocking imo, since we can't build and deploy our storybooks.

[mert-duzgun]

Hi, the v7 docs recommend using a server to view your build output. Just run npx http-server storybook-static.

Reference

[mkosir]

@mert-duzgun thanks for pointing this out 👍 . Was wondering why our deployed builds stopped working after upgrading to SB v7 since everything seemed to be ok with builds.
Still not sure why this change was necessary though...

[ghost91-]

@mert-duzgun using a server is not an (easy) option for us. So far, we have simply built the static stroybook in Jenkins and served it as Jenkins artifact. If we really need a full web server for this, we would need to set up quite a bit of additional infrastructure (for each storybook—yes, we have multiple...). Of course it's possible, but we really appreciate the simplicity of the previous solution.

[mkosir]

@shilman happy user of v7 here :), just wondering what is the reason for this "change" in build output, I assume storybook build process (and tooling) got much more complex, and can't be served as before in v6?

[PupoSDC]

+1 to the list. This makes our lifes significantly harder.

For me the problem is that storybook is available here:

https://chair-flight-cxdu0ds6v-puposdc-s-team.vercel.app/storybook`

and its trying to fetch from the wrong directory. Ie.e:

https://chair-flight-cxdu0ds6v-puposdc-s-team.vercel.app/sb-addons/essentials-backgrounds-2/manager-bundle.mjs

instead of

https://chair-flight-cxdu0ds6v-puposdc-s-team.vercel.app//storybook/sb-addons/essentials-backgrounds-2/manager-bundle.mjs

[itwaze]

@FlorianChristie the issue is that file:// protocol doesn't support import/export
https://www.w3schools.com/js/js_modules.asp

in order to serve the build locally, one of the way just install VSCode extension calling LiveServer (Five Server)
https://github.com/yandeu/five-server-vscode

then by pressing 1 button you will start to serve your opened folder

in this way you will not have any extra scripts in your package.json

[shilman]

My understanding, based on convo with the other maintainers, is that we are using modern ESM now and the browser CORS rules are more restrictive for browsing file URLs with ESM.

@ndelangen did I get that right?

[PupoSDC]

+1 to the list. This makes our life significantly harder.

For me the problem is that storybook is available here:

https://chair-flight-cxdu0ds6v-puposdc-s-team.vercel.app/storybook`

and its trying to fetch from the wrong directory. Ie.e:

https://chair-flight-cxdu0ds6v-puposdc-s-team.vercel.app/sb-addons/essentials-backgrounds-2/manager-bundle.mjs

instead of

https://chair-flight-cxdu0ds6v-puposdc-s-team.vercel.app//storybook/sb-addons/essentials-backgrounds-2/manager-bundle.mjs

FWIW, I got around my particular issue by using next js redirect:

module.exports = withNx(
  withBundleAnalyzer(
    withMDX({
      async rewrites() {
        return [
          "assets",
          "sb-addons",
          "sb-common-assets",
          "sb-manager",
          "sb-preview",
          "index.json",
          "iframe.html",
          "project.json",
          "stories.json",
        ].map((source) => ({
          source: `/${source}/:path*`,
          destination: `/storybook/${source}/:path*`,
        }));
      },
    })
  )
);

This might become a problem if we ever decide to have more than one SB... but realisticly we won't so I think we are good for now :D

(Also, PS... storybook 7 is just great. I have always had one pickle or another with SB... but the new format really makes the whole experience so smooth)

[ndelangen]

@shilman browsers not supporting ESM natively when on the file://-protocol is an missed oversight of the modernization work, unfortunate.

I'm guessing the issue can be closed with "won't fix" if it's purely about the fact this protocol doesn't work anymore.
It certainly wasn't our intention to break that feature, though how easy it is nowadays to simply spawn a quick http server that works great, it also doesn't feel super useful anymore.

npx http-server ./storybook-static   

... will do it.

---

If this issue is about something else as well too, perhaps it should stay open?

[FlorianChristie]

Sorry, I made that a bit unclear in my initial message. For me personally, there is no problem with storybook v7 for local development. But since we share the static pages with other people (e.g. UI designers) that mostly don't have node installed we relied on just archiving the static story book pages e.g. in Jenkins. This is basically the problem that @ghost91- and @PupoSDC described.
And as @ghost91- pointed out: It is possible with the new approach, no doubt, but we appreciated the possibility to simply archive the static output.

[binarykitchen]

It's a breaking change when migrating from v6, so this should be mentioned in the migrating docs.

[eifr-vault]

#20157 (comment) <- solved it for us. we're serving from s3 with nginx

[ndelangen]

I believe @shilman added it to the migration guide some time ago.

[FlorianChristie]

Yup, it's there https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-support-for-file-urls

We also find a workaround meanwhile by adapting our Jenkins CSP.

I will close this issue, since it is mentioned in the official migration for v7 and thus the new wanted behavior. 🙂

Thanks for the discussion and all the hints and comments. ❤️

[SidduSomething]

FWIW, it's relatively easier to work around this in Firefox. It has a security.fileuri.strict_origin_policy setting you can disable:

Might be sufficient for some use cases.