Skip to content
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

Closed
Chudesnov opened this issue Sep 2, 2024 · 2 comments · Fixed by #29048

Comments

@Chudesnov
Copy link
Contributor

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:

`hmrPreviewAnnotationModules.at(${index}) ?? import('${previewAnnotation}')`

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
Copy link

JayC561 commented Sep 4, 2024

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

@Chudesnov
Copy link
Contributor Author

@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.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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants