[Bug]: Storybook Vite Builder injected runtime uses .at() method, breaking compatibility with older browsers.

[Chudesnov]

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: https://github.com/storybookjs/storybook/blob/00c1524e0e393da445b3a5e2d82197d453907dcc/code/builders/builder-vite/src/codegen-modern-iframe-script.ts#L30

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 of dev.)

1. Using a browser that does not support .at(), open the provided link.
2. 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.

[JayC561]

Hey @Chudesnov , I'm new to this, if we transpile our code with tool like babel does it solves our problem?

[Chudesnov]

@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 https://github.com/storybookjs/storybook/blob/00c1524e0e393da445b3a5e2d82197d453907dcc/code/builders/builder-vite/src/codegen-modern-iframe-script.ts#L30

-            `hmrPreviewAnnotationModules.at(${index}) ?? import('${previewAnnotation}')` 
+            `hmrPreviewAnnotationModules[${index}] ?? import('${previewAnnotation}')`