You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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.
(Note: The example uses the development server for demonstration purposes; the result is the same when running storybook build instead of dev.)
Using a browser that does not support .at(), open the provided link.
The browser should fail with the error: "hmrPreviewAnnotationModules.at is not a function."
System
This issue is specific to the on-device browser version and is not related to the developer environment.
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:
@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
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: