storybook: [Bug]: Config.base not getting appended correctly

Describe the bug

Second http-request of runtime-mjs => sb-preview is not getting config.base appended correctly in Storybook 7 when deployed to github pages resulting in a 404

To Reproduce

I am building storybook in a git workflow...

npx cross-env BASE_URL=https://xxxxxx.github.io/DesignSystem/ npm run build-storybook

^build-story in package.json
"build-storybook": "storybook build"

in .storybook/main.js

async viteFinal(config) {
    config.base = process.env.BASE_URL || config.base;
    return config;
}

First http-request
/DesignSystem/sb-preview/runtime.mjs

Second http-request
/sb-preview/runtime.mjs (404)

System

Environment Info:

  System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 18.12.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 107.0.5304.123
    Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.42)
  npmPackages:
    @storybook/addon-actions: ^7.0.0-alpha.61 => 7.0.0-alpha.61
    @storybook/addon-docs: ^7.0.0-alpha.61 => 7.0.0-alpha.61
    @storybook/addon-essentials: ^7.0.0-alpha.61 => 7.0.0-alpha.61
    @storybook/addon-interactions: ^7.0.0-alpha.61 => 7.0.0-alpha.61
    @storybook/addon-links: ^7.0.0-alpha.61 => 7.0.0-alpha.61
    @storybook/addon-postcss: ^2.0.0 => 2.0.0
    @storybook/react: ^7.0.0-alpha.61 => 7.0.0-alpha.61
    @storybook/react-vite: ^7.0.0-alpha.61 => 7.0.0-alpha.61
    @storybook/testing-library: 0.0.14-next.0 => 0.0.14-next.0

Additional context

No response

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 2
  • Comments: 27 (12 by maintainers)

Most upvoted comments

I can confirm the issue is fixed on my side with the latest beta, thanks a lot for your reactivity!

I’m fairly confident my PR will fix the issue.

Screenshot 2022-12-13 at 18 30 23

runtime.mjs makes a relative-URL request, so if the runtime.mjs resolves from the correct path, the request it makes should work as well.

@tomasbillborn thanks for bringing it up. Storybook itself is not intentionally creating these files. I’m not positive where they’re coming from, but they might be generated by babel or vite or some other tool in the chain. It’s unfortunate that GitHub pages don’t play nicely with them by default, but I’m not sure there is anything we could do to name them differently, unfortunately.

Ooh-la-la!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.7 containing PR #20232 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there’s still more to do.

One more bit of information: I added a nginx rewrite rule to fix the issue specifically for /sb-preview/runtime.mjs and ended up having another failing import: /sb-preview/chunk-I2FDEMEK.mjs. So the runtime.mjs is not the only issue here 😉

@tomasbillborn Not yet. Working through high priority bugs identified by the beta. This is on the list!

@IanVS you asked me to tag you here after creating the bug