[Bug]: Failed to resolve module in static storybook build

[brettsaunders21]

Describe the bug

1. In a Vite (using Vue 2.7) project I setup Storybook using npx sb@next init
2. Ran yarn build-storybook
3. Copied the storybook-static to an empty GitHub repository and renamed folder docs
4. Setup github pages to point to that branch and docs folder

When I visit the github pages link storybooks loads but I see the following error Failed to resolve module specifier "vue/dist/vue.esm.js". Relative references must start with either "/", "./", or "../".

To Reproduce

Repo: https://github.com/brettsaunders21/storybook-issue-21771
https://brettsaunders21.github.io/storybook-issue-21771/

Steps

1. Run reproducer command and select Vue 2.7
2. Run yarn in repo
3. Run yarn build-storybook
4. Copy contents of static-storybook to new branch gp-pages with no other contents in
5. Go to Gihtub repo settings, pages
6. Select deploy from branch, gp-pages and /root and save
7. Open deploy and see dynamic import error
   

System

No response

Additional context

No response

[shilman]

Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. Thank you! 🙏

[brettsaunders21]

Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. Thank you! 🙏

Updated to include reproducer

[nhabre13]

I would like to add to this issue. I am using storybook v7 and when I try to load a static version of my storybook I get the same error mentioned above

[brettsaunders21]

@shilman Any update on this? It seems like there is no way to host a site when using Vue2.7 and Vite?

Dev mode is the only way to get storybook running but can't really use that to host it.

[ndelangen]

I'm investigating this, and I'm noticing that the the preview's code files seems to be all inside a assets folder. I'm not sure where this is defined/comes from, tbh.

I've traced the problem to here:

...these 2 files are missing. GitHub simply won't serve them.

Here's the code referencing those files:

const {composeConfigs: L, PreviewWeb: w, ClientApi: h} = __STORYBOOK_MODULE_PREVIEW_API__
  , I = async()=>{
  const o = await Promise.all([
r(()=>import("./config.afc0e6c7.js"), ["./config.afc0e6c7.js", "./index.67736049.js", "./index.b06c8f14.js", "./_baseAssignValue.8149923b.js", "./_commonjsHelpers.712cc82f.js"], import.meta.url), 
r(()=>import("./preview.7097858e.js"), ["./preview.7097858e.js", "./index.e850844b.js", "./index.f1e20297.js"], import.meta.url), 
r(()=>import("./preview.521f3633.js"), [], import.meta.url), 
r(()=>import("./preview.2a2b91a3.js"), ["./preview.2a2b91a3.js", "./_commonjsHelpers.712cc82f.js"], import.meta.url), 
r(()=>import("./preview.ed4d2ac0.js"), ["./preview.ed4d2ac0.js", "./index.e850844b.js", "./index.67736049.js"], import.meta.url), 
r(()=>import("./preview.b5c0a545.js"), ["./preview.b5c0a545.js", "./index.e850844b.js"], import.meta.url), 
r(()=>import("./preview.ff591c0a.js"), ["./preview.ff591c0a.js", "./index.e850844b.js", "./index.67736049.js"], import.meta.url), 
r(()=>import("./preview.a1398560.js"), ["./preview.a1398560.js", "./index.e850844b.js"], import.meta.url), 
r(()=>import("./preview.38501c60.js"), ["./preview.38501c60.js", "./index.e850844b.js", "./index.da9ff391.js", "./_commonjsHelpers.712cc82f.js"], import.meta.url), 
r(()=>import("./preview.ba5e44d5.js"), [], import.meta.url)
]);
  return L(o)
};

All these files seem to work fine, except for the files starting with a _ character.

I don't think it's really a pathing issue. I wonder if GitHub is just refusing to deploy those files for some reason.

@shilman I suspect this isn't a storybook issue, but rather a GitHub pages deployment issue.

[ndelangen]

For reference:
https://stackoverflow.com/questions/40104627/ignore-a-path-on-a-github-pages-site
mpetrovich/stylemark#65

This seems to be a solution:
mpetrovich/stylemark#65 (comment)