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)

Open
#159 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.