From 2397832bd5d2d8f6ffb8089287c9835b79d242b8 Mon Sep 17 00:00:00 2001
From: Oleksii Bulenok <oleksii.bulenok@swmansion.com>
Date: Fri, 31 Jul 2026 11:08:04 +0200
Subject: [PATCH] Fix Reanimated unresolved imports under webpack

---
 web/reanimatedWebUtilsShim.js | 20 ++++++++++++++++++++
 webpack.config.js             | 12 ++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 web/reanimatedWebUtilsShim.js

diff --git a/web/reanimatedWebUtilsShim.js b/web/reanimatedWebUtilsShim.js
new file mode 100644
index 0000000000..645ad9ec1e
--- /dev/null
+++ b/web/reanimatedWebUtilsShim.js
@@ -0,0 +1,20 @@
+/*
+ * Replacement for react-native-reanimated's js-reanimated/webUtils.web.js,
+ * wired up via a webpack alias in webpack.config.js.
+ *
+ * The original file declares ES module exports but populates them with bare
+ * CommonJS `require()` calls wrapped in try/catch. Webpack parses the file as
+ * ESM and therefore leaves those `require`s untouched, so in the browser they
+ * throw ReferenceError, the try/catch swallows it, and createReactDOMStyle &
+ * co. stay undefined. That silently disables reanimated's DOM update path and
+ * _updatePropsJS later crashes with "Cannot convert undefined or null to
+ * object" on Object.keys(component.props). Importing the same react-native-web
+ * internals statically fixes the resolution.
+ */
+import createReactDOMStyle from 'react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle'
+import {
+  createTextShadowValue,
+  createTransformValue,
+} from 'react-native-web/dist/exports/StyleSheet/preprocess'
+
+export {createReactDOMStyle, createTextShadowValue, createTransformValue}
diff --git a/webpack.config.js b/webpack.config.js
index f1247bf517..d843ee3923 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -77,6 +77,18 @@ module.exports = async function (env, argv) {
       __dirname,
       'node_modules/react-native-svg/lib/module/utils/fetchData',
     )]: false,
+    /*
+     * reanimated's webUtils.web.js mixes ESM exports with bare CommonJS
+     * require() calls in try/catch, which webpack leaves untranspiled - they
+     * throw at runtime and createReactDOMStyle & co. silently stay undefined,
+     * making _updatePropsJS crash on every animated style update. The shim
+     * imports the same react-native-web internals statically. See the shim
+     * file for details.
+     */
+    [path.join(
+      __dirname,
+      'node_modules/react-native-reanimated/lib/module/ReanimatedModule/js-reanimated/webUtils',
+    )]: path.join(__dirname, 'web/reanimatedWebUtilsShim.js'),
   })
 
   /*