-
-
Notifications
You must be signed in to change notification settings - Fork 9.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: Storybook Vite Builder injected runtime uses .at() method, breaking compatibility with older browsers. #29030
Labels
Comments
Hey @Chudesnov , I'm new to this, if we transpile our code with tool like babel does it solves our problem? |
@JayC561 running a transpiler against this code could solve the issue, but the much easier fix is to change the syntax used in the template in generateModernIframeScriptCode
- `hmrPreviewAnnotationModules.at(${index}) ?? import('${previewAnnotation}')`
+ `hmrPreviewAnnotationModules[${index}] ?? import('${previewAnnotation}')` |
Chudesnov
added a commit
to Chudesnov/storybook
that referenced
this issue
Sep 4, 2024
Unblocks loading Storybook instances built with Vite devices with pre-2022 browser versions. Resolves storybookjs#29030
8 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
While most Storybook functionality does not require the latest browser versions, the Vite builder injects code into the runtime that completely breaks the app in browsers released before 2021/2022. The issue stems from this code:
storybook/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
Line 30 in 00c1524
Specifically, this runtime uses the Array#at method, which is not available in iOS versions prior to 15.4 (still accounting for about 1% of global web usage). Patching Array.prototype.at into the global object through
managerHead
does not resolve the issue. This is because the modules that require this syntax are loaded via<script type="module">
. In iOS Safari 15.3 at least, these modules do not seem to wait for global scripts to finish executing.Switching to a simple [index] access method instead of .at(index) does not seem to impact any functionality.
Reproduction link
https://vanilla-vite-chudesnov.replit.app/
Reproduction steps
(Note: The example uses the development server for demonstration purposes; the result is the same when running
storybook build
instead ofdev
.).at()
, open the provided link.System
Additional context
This issue complicates testing components documented with Storybook for compatibility with devices that are limited to older browser versions without upgrading the entire system (a niche use case, admittedly).
To the best of my knowledge, this is the only issue preventing Storybook built with Vite from running in most older browsers such as iOS Safari <15.4.
The text was updated successfully, but these errors were encountered: