fix: web _updatePropsJS crash under strict ESM and on prop-less component refs#9870
Open
MatiPl01 wants to merge 7 commits into
Open
fix: web _updatePropsJS crash under strict ESM and on prop-less component refs#9870MatiPl01 wants to merge 7 commits into
_updatePropsJS crash under strict ESM and on prop-less component refs#9870MatiPl01 wants to merge 7 commits into
Conversation
webUtils.web.ts loaded react-native-web style helpers with a bare require() inside an ESM module, so strict-ESM bundlers (webpack, Rollup, esbuild) and Node ESM (SSR) left the helpers undefined and _updatePropsJS crashed on every animation frame. Keep the synchronous require() for Metro behind a typeof-require guard and add a dynamic import() fallback for strict ESM. Also guard the props branch so a component ref without setNativeProps, style or props degrades to a warning instead of throwing.
- webUtils.web.ts: load the react-native-web helpers in a single top-level try/catch and fall back to the dist/cjs build on any require() failure, so a partial load is repaired; collapse the duplicated preprocess require. Kept as a plain try/catch (no top-level if / IIFE) so the module stays tree-shakable. - index.ts: presence test in the _touchableNode branch so a real falsy update (0 / '' / false) is applied instead of silently dropped. - Add web regression tests for _updatePropsJS (no throw on a prop-less ref, #9854) and web helper loading plus the dist/cjs fallback specifiers (#9844).
MatiPl01
changed the title
_updatePropsJS crash under strict ESM and on prop-less component refs
Import the react-native-web style helpers statically instead of a runtime require() with an async import() fallback. Static imports resolve at build time, so the helpers are always defined synchronously: styles apply on the first frame, with no async gap and no case where they silently aren't applied. The dist/cjs build with .js extensions resolves under Metro, strict-ESM bundlers (webpack, Rollup, esbuild) and Node's ESM resolver (SSR). createReactDOMStyle is a CJS default export so it is unwrapped; the preprocess helpers are named exports read directly (not from `.default`), which is what makes them resolve under both Babel and non-Babel toolchains.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
On web,
webUtils.web.tsloaded react-native-web's style helpers withrequire(), but the file itself is ESM. Under strict-ESM bundlers (webpack, Rollup, esbuild) and SSR there's norequire, so the helpers wereundefinedand_updatePropsJSthrewCannot convert undefined or null to objecton every frame. Metro providesrequire, so it was never affected.The helpers are now imported statically from react-native-web's
dist/cjsbuild (with.jsextensions, so they resolve under Metro, strict-ESM bundlers, and Node's ESM resolver used in SSR). Static imports resolve at build time, so the helpers are always defined synchronously and styles apply from the first frame.Also guards the props branch in
_updatePropsJSso a ref withoutsetNativeProps/style/propswarns instead of throwing (hit via gifted-chat'suseAnimatedKeyboardon web).Fixes #9854