[BUG] /design-sync validator reports every component missing when the bundle contains non-ASCII (smoke page has no charset)

Status Fixed / completed
Reported on v2.1.282
Maintainer reply None cached
Activity 0 comments · opened Sep 25, 2026 · closed Oct 2, 2026

Summary

/design-sync's validator reports every component as missing when the bundle contains non-ASCII characters:

✗ [BUNDLE_EXPORT] 98/98 not a component on window.<Global>: Alert, Author, Avatar, …

The bundle is fine. Every component preview renders in the same run (render check: 98/98 previews render cleanly). Only the smoke page decodes the bundle with the wrong character encoding.

Claude Code 2.1.282, macOS, storybook shape.

Cause

  • package-validate.mjs (the [BUNDLE_EXPORT] smoke check) navigates to /, then calls page.setContent('<!doctype html><script src="/_vendor/react.js"></script>…<script src="/_ds_bundle.js"></script>').
  • storybook/http-serve.mjs serves / as text/html and .js as text/javascript, both without charset=utf-8.
  • The document therefore falls back to windows-1252, and the bundle script inherits that encoding.
  • lib/bundle.mjs sets no esbuild charset, so non-ASCII from dependencies stays verbatim. In our bundle, validator/lib/alpha.js contains /^[Α-ώ]+$/i. Decoded as windows-1252 it parses as /^[Α-ÏŽ]+$/i, and the bundle fails to load:
SyntaxError: Invalid regular expression: /^[Α-ώ]+$/i: Range out of order in character class
  • The page error is never reported. The waitForFunction timeout is swallowed, and pageErrs is reset before the preview loop, so only the misleading [BUNDLE_EXPORT] line is printed.
  • The emitted preview pages declare <meta charset="utf-8">, which is why they render.

Adding <meta charset="utf-8"> inside setContent does not help. The document's encoding was already fixed by the navigation to /.

Verified fixes

I replayed the smoke page with Playwright against the same bundle:

| Variant | Components on the global | Page errors |
|---|---|---|
| Stock server, stock page | 0 | the SyntaxError above |
| Stock server, <script charset="utf-8" src="/_ds_bundle.js"> | 149 | none |
| Server sends text/javascript; charset=utf-8 and text/html; charset=utf-8 | 149 | none |

Suggested change:

  • add ; charset=utf-8 to the text types in http-serve.mjs's MIME map (or charset="utf-8" on the smoke page's script tags);
  • print the collected page errors when the namespace never appears.

Setting esbuild's charset: 'ascii' in lib/bundle.mjs would also make the bundle immune to how a page declares its encoding.

View original on GitHub ↗