From bce4b2058d3a92209c8f595f258ad753974299e2 Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Tue, 27 Feb 2024 16:26:55 +0100
Subject: [PATCH] Fix Web examples on Webpack (#2256)

---
 docs/docs/getting-started/web.mdx          | 39 +++++++++++-----------
 example/webpack.config.js                  |  1 +
 package/src/external/reanimated/buffers.ts |  3 +-
 3 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/docs/docs/getting-started/web.mdx b/docs/docs/getting-started/web.mdx
index d2e7769ff6..0b94e1b88f 100644
--- a/docs/docs/getting-started/web.mdx
+++ b/docs/docs/getting-started/web.mdx
@@ -37,24 +37,21 @@ $ yarn setup-skia-web
 
 Run `yarn setup-skia-web` each time you upgrade the `@shopify/react-native-skia` package.
 Consider incorporating it into your `postinstall` script for convenience.
+```
 
 :::
 
 After setup, choose your method to [Load Skia](#loading-skia).
 
-### Expo Router
-
 For projects using Expo Router, you can use [code-splitting](#using-code-splitting) or [deferred component registration](#using-deferred-component-registration).
-If you wish to use deferred component registration with Expo Router, create a new entry script and reference it in your `package.json`. For instance, if you've created `index.js` and `index.web.js` in the `src/` directory, update your `package.json` accordingly:
-```js
-// package.json
-{
-  "main": "src/index",
-  //...
-}
+If you wish to use deferred component registration with Expo Router, you need to create your own `main` property in `package.json`.
+For instance, if you've created `index.tsx` and `index.web.tsx` in your root directory, update your `package.json` accordingly:
+```patch
+-  "main": "expo-router/entry",
++  "main": "index",
 ```
 
-Below is an example of `src/index.web.js`:
+Below is an example of `index.web.tsx`:
 
 ```tsx
 import '@expo/metro-runtime';
@@ -68,7 +65,7 @@ LoadSkiaWeb().then(async () => {
 });
 ```
 
-For the `src/index.js` file, directly invoke `renderRootComponent(App)`.
+For the `index.tsx` file, directly invoke `renderRootComponent(App)`.
 
 ### Snack
 
@@ -171,15 +168,15 @@ To request these features, please submit [a feature request on GitHub](https://g
 * `ImageSvg`
 
 
-## Manual Webpack Installation
+## Manual webpack Installation
 
-To enable React Native Skia on Web using Webpack, three key actions are required:
+To enable React Native Skia on Web using webpack, three key actions are required:
 
 - Ensure the `canvaskit.wasm` file is accessible to the build system.
 - Configure the build system to resolve the `fs` and `path` node modules, achievable via the [node polyfill plugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin).
-- Address Webpack's warning about the absent `react-native-reanimated` module, as React Native Skia references it.
+- Update aliases for `react-native-reanimated` and `react-native/Libraries/Image/AssetRegistry` so webpack can do the bundle.
 
-Here is an example Webpack v5 configuration accommodating React Native Skia:
+Here is an example webpack v5 configuration accommodating React Native Skia:
 
 ```tsx
 import fs from "fs";
@@ -214,11 +211,15 @@ const newConfiguration = {
 
     new NodePolyfillPlugin()
   ],
-  externals: {
-    ...currentConfiguration.externals,
+  alias: {
+    ...currentConfiguration.alias,
     // 3. Suppress reanimated module warning
-    "react-native-reanimated": "require('react-native-reanimated')",
-    "react-native-reanimated/package.json": "require('react-native-reanimated/package.json')",
+    // This assumes Reanimated is installed, if not you can use false.
+    "react-native-reanimated/package.json": require.resolve(
+      "react-native-reanimated/package.json"
+    ),
+    "react-native-reanimated": require.resolve("react-native-reanimated"),
+    "react-native/Libraries/Image/AssetRegistry": false,
   },
 }
 ```
diff --git a/example/webpack.config.js b/example/webpack.config.js
index 16eb5eeb22..4f0265cb6c 100644
--- a/example/webpack.config.js
+++ b/example/webpack.config.js
@@ -89,6 +89,7 @@ module.exports = {
         "react-native-reanimated/package.json"
       ),
       "react-native-reanimated": require.resolve("react-native-reanimated"),
+      "react-native/Libraries/Image/AssetRegistry": false,
     },
   },
   module: {
diff --git a/package/src/external/reanimated/buffers.ts b/package/src/external/reanimated/buffers.ts
index d0a53c5bb5..7d68b02ca0 100644
--- a/package/src/external/reanimated/buffers.ts
+++ b/package/src/external/reanimated/buffers.ts
@@ -1,11 +1,10 @@
 import { useEffect, useMemo } from "react";
-import { startMapper, stopMapper } from "react-native-reanimated";
 import type { WorkletFunction } from "react-native-reanimated/lib/typescript/reanimated2/commonTypes";
 
 import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
 import { Skia } from "../../skia";
 
-import { useSharedValue } from "./moduleWrapper";
+import { startMapper, stopMapper, useSharedValue } from "./moduleWrapper";
 import { notifyChange } from "./interpolators";
 
 type Modifier<T> = (input: T, index: number) => void;