[BUG] /design-sync validator reports every component missing when the bundle contains non-ASCII (smoke page has no charset)
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 callspage.setContent('<!doctype html><script src="/_vendor/react.js"></script>…<script src="/_ds_bundle.js"></script>').storybook/http-serve.mjsserves/astext/htmland.jsastext/javascript, both withoutcharset=utf-8.- The document therefore falls back to windows-1252, and the bundle script inherits that encoding.
lib/bundle.mjssets no esbuildcharset, so non-ASCII from dependencies stays verbatim. In our bundle,validator/lib/alpha.jscontains/^[Α-ώ]+$/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
waitForFunctiontimeout is swallowed, andpageErrsis 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-8to the text types inhttp-serve.mjs's MIME map (orcharset="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.