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

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

About this issue

Original URL
State: closed
Created a year ago
Reactions: 10
Comments: 16 (3 by maintainers)

Most upvoted comments

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.

+14

FlorianChristie on Apr 20, 2023

@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.

+10

ghost91- on Apr 11, 2023

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. ❤️

FlorianChristie on May 4, 2023

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

Reference

mert-duzgun on Apr 20, 2023

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

binarykitchen on May 2, 2023

+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 😄

(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)

PupoSDC on Apr 18, 2023

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

ndelangen on May 4, 2023

@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…

mkosir on Apr 10, 2023