Load react-native-web helpers with static imports

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.

Author: MatiPl01

packages/react-native-reanimated/src/ReanimatedModule/js-reanimated/react-native-web.d.ts

@@ -1,5 +1,3 @@
 'use strict';
-declare module 'react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle';
-declare module 'react-native-web/dist/exports/StyleSheet/preprocess';
 declare module 'react-native-web/dist/cjs/exports/StyleSheet/compiler/createReactDOMStyle.js';
 declare module 'react-native-web/dist/cjs/exports/StyleSheet/preprocess.js';

packages/react-native-reanimated/src/ReanimatedModule/js-reanimated/webUtils.web.ts

@@ -1,64 +1,35 @@
 'use strict';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export let createReactDOMStyle: (style: any) => any;
+// react-native-web exposes these style helpers only through internal modules.
+// They're imported statically so strict-ESM bundlers (webpack, Rollup, esbuild)
+// and SSR resolve them at build time and they're always defined synchronously - a
+// runtime require() isn't available in ESM there, which left them undefined and
+// crashed _updatePropsJS (#9844). The dist/cjs build (with explicit .js extensions)
+// is used because SSR frameworks load an externalized react-native-web with Node's
+// ESM resolver, which rejects the extensionless relative imports in dist/exports.
+// eslint-disable-next-line n/no-unpublished-import
+import * as createReactDOMStyleModule from 'react-native-web/dist/cjs/exports/StyleSheet/compiler/createReactDOMStyle.js';
+// eslint-disable-next-line n/no-unpublished-import
+import * as preprocessModule from 'react-native-web/dist/cjs/exports/StyleSheet/preprocess.js';
 
+// createReactDOMStyle is a CJS default export (module.exports = fn), so unwrap
+// `.default`. createTransformValue / createTextShadowValue are named exports on
+// module.exports and are read directly - they're not on `.default`, which is a
+// separate `preprocess` function.
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export let createTransformValue: (transform: any) => any;
+const interopDefault = (moduleExports: any) =>
+  moduleExports?.default ?? moduleExports;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export let createTextShadowValue: (style: any) => void | string;
-
-// react-native-web exposes these style helpers only via internal modules. Metro
-// has require() so we load them synchronously; strict-ESM bundlers and SSR don't,
-// so require() throws and we fall back to import()ing the dist/cjs build
-// (dist/exports' extensionless imports fail Node's ESM resolver). If neither
-// resolves, the helpers stay undefined and the DOM update is skipped, so those
-// styles just aren't applied (no crash).
-//
-// Kept as a single top-level try/catch (no top-level `if` or IIFE) so the module
-// stays tree-shakable - see the is-tree-shakable check.
-try {
-  createReactDOMStyle =
-    // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports, n/no-unpublished-require
-    require('react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle').default;
-  // React Native Web 0.19+
-  const preprocess =
-    // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports, n/no-unpublished-require
-    require('react-native-web/dist/exports/StyleSheet/preprocess');
-  createTransformValue = preprocess.createTransformValue;
-  createTextShadowValue = preprocess.createTextShadowValue;
-} catch (_e) {
-  // No require() (strict ESM / SSR), or a helper module was missing: load the
-  // helpers from the dist/cjs build instead.
-  void (async () => {
-    // The cjs export may arrive as `.default` (bundler/Node interop) or as the
-    // namespace itself; handle both.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const interopDefault = (moduleExports: any) =>
-      moduleExports?.default ?? moduleExports;
+export const createReactDOMStyle: (style: any) => any = interopDefault(
+  createReactDOMStyleModule
+);
 
-    try {
-      const styleModule = await import(
-        // eslint-disable-next-line n/no-unpublished-import
-        'react-native-web/dist/cjs/exports/StyleSheet/compiler/createReactDOMStyle.js'
-      );
-      createReactDOMStyle = interopDefault(styleModule);
-    } catch (_e2) {
-      // Unresolved: the DOM update is skipped, so these styles aren't applied.
-    }
+// React Native Web 0.19+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const createTransformValue: (transform: any) => any =
+  preprocessModule.createTransformValue;
 
-    try {
-      const preprocessModule = await import(
-        // eslint-disable-next-line n/no-unpublished-import
-        'react-native-web/dist/cjs/exports/StyleSheet/preprocess.js'
-      );
-      // React Native Web 0.19+
-      const preprocess = interopDefault(preprocessModule);
-      createTransformValue = preprocess.createTransformValue;
-      createTextShadowValue = preprocess.createTextShadowValue;
-    } catch (_e2) {
-      // Optional: leaving them undefined just skips transform/textShadow.
-    }
-  })();
-}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const createTextShadowValue: (style: any) => void | string =
+  preprocessModule.createTextShadowValue;