cloudflare / cloudflare/realtimekit-ui
realtimekit-ui crashes at module load on Safari < 16.4 — "Invalid regular expression: invalid group specifier name" (lookbehind regex in Stencil shadow-css)
- Dominant language
- TypeScript
- Stars
- 64
- Forks
- 22
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 5
Description
## Summary
Importing `@cloudflare/realtimekit-ui` (directly, or transitively via `@cloudflare/realtimekit-react-ui`) crashes the **entire page** on Safari versions **below 16.4** (iOS/iPadOS 15.x and 16.0–16.3).
The package constructs a **lookbehind regular expression at module-evaluation time**. Safari's JS engine did not support regex lookbehind until 16.4, so the `RegExp` constructor throws `SyntaxError: Invalid regular expression: invalid group specifier name` the moment the module is evaluated — before any component is even rendered.
## Environment
- `@cloudflare/realtimekit-ui`: **2.0.0** (latest). Also reproduced in **1.1.1** and **1.2.0** — the offending code is present in **every published version**.
- Consumed via `@cloudflare/realtimekit-react-ui@2.0.0` + `@cloudflare/realtimekit-react@2.0.0`.
- Bundler: Vite / Rollup, ESM output.
- Failing browsers: Safari on **iOS/iPadOS < 16.4** (e.g. iOS 15.0, 16.0–16.3).
- Working browsers: Safari **16.4+**, all Chrome/Firefox/Edge.
## Actual behavior
On an affected browser, loading any route whose module graph statically imports the package produces:
```
SyntaxError: Invalid regular expression: invalid group specifier name
RegExp
(realtimekit-ui bundle) <-- called from module top-level ("Module Code")
Module Code (realtimekit-ui bundle)
```
Because it throws during **module evaluation** (not lazily / on render), the whole app crashes — in our case a React app's error boundary catches it and shows a generic error screen, even on pages that never render a RealtimeKit component.
## The offending code
From the published minified ESM bundle (`dist`), the shadow-css scoping helper (runs at module top-level):
```js
const fn = (r) => new RegExp(`((?
Contributor guide
Research direction
Start with the published minified ESM bundle in dist and the Stencil shadow-DOM CSS scoping helper that constructs the lookbehind RegExp at module top level. Reproduce an import on Safari below 16.4, then trace the corresponding source or build configuration; done means importing the package no longer throws there, with the supported Safari baseline documented if older browsers remain excluded.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100