Add missing @stylexjs/babel-plugin in web-example (#6886)

## Summary This PR fixes the following errors that occur when trying to run web-example using `yarn start --reset-cache`: ``` Web Bundling failed 174ms apps/web-example/index.js (1 module) ERROR index.js: Cannot find module '@stylexjs/babel-plugin' Require stack: - /Users/tomekzaw/RNOS/react-native-reanimated/apps/web-example/babel.config.js - /Users/tomekzaw/RNOS/react-native-reanimated/node_modules/@babel/core/lib/config/files/module-types.js - /Users/tomekzaw/RNOS/react-native-reanimated/node_modules/@babel/core/lib/config/files/configuration.js - /Users/tomekzaw/RNOS/react-native-reanimated/node_modules/@babel/core/lib/config/files/index.js - /Users/tomekzaw/RNOS/react-native-reanimated/node_modules/@babel/core/lib/index.js - /Users/tomekzaw/RNOS/react-native-reanimated/apps/web-example/node_modules/@expo/metro-config/build/transform-worker/metro-transform-worker.js - /Users/tomekzaw/RNOS/react-native-reanimated/apps/web-example/node_modules/@expo/metro-config/build/transform-worker/transform-worker.js - /Users/tomekzaw/RNOS/react-native-reanimated/node_modules/metro/src/DeltaBundler/Worker.flow.js - /Users/tomekzaw/RNOS/react-native-reanimated/node_modules/metro/src/DeltaBundler/Worker.js - /Users/tomekzaw/RNOS/react-native-reanimated/node_modules/jest-worker/build/workers/processChild.js ``` Then I faced another error: ``` Web Bundling failed 5562ms apps/web-example/index.js (1325 modules) ERROR ReferenceError: SHA-1 for file /Users/tomekzaw/RNOS/react-native-reanimated/node_modules/@react-native/js-polyfills/error-guard.js is not computed. Potential causes: 1) You have symlinks in your project - watchman does not follow symlinks. 2) Check `blockList` in your metro.config.js and make sure it isn't excluding the file path. at DependencyGraph.getSha1 (/Users/tomekzaw/RNOS/react-native-reanimated/node_modules/metro/src/node-haste/DependencyGraph.js:181:13) at Transformer._getSha1 (/Users/tomekzaw/RNOS/react-native-reanimated/node_modules/metro/src/Bundler.js:15:26) at Transformer.transformFile (/Users/tomekzaw/RNOS/react-native-reanimated/node_modules/metro/src/DeltaBundler/Transformer.js:92:19) at Bundler.transformFile (/Users/tomekzaw/RNOS/react-native-reanimated/node_modules/metro/src/Bundler.js:43:30) at processTicksAndRejections (node:internal/process/task_queues:95:5) at Object.transform (/Users/tomekzaw/RNOS/react-native-reanimated/node_modules/metro/src/lib/transformHelpers.js:134:12) at transform (/Users/tomekzaw/RNOS/react-native-reanimated/node_modules/metro/src/DeltaBundler/Graph.js:164:26) at visit (/Users/tomekzaw/RNOS/react-native-reanimated/node_modules/metro/src/DeltaBundler/buildSubgraph.js:82:29) at async Promise.all (index 3) at buildSubgraph (/Users/tomekzaw/RNOS/react-native-reanimated/node_modules/metro/src/DeltaBundler/buildSubgraph.js:103:3) ``` Turns out it's dependent on whether react-native is hoisted or not so I applied the following patch for `metro.config.js` that @tjzel had sent me: ```js const hasReactNative = require.resolve('react-native/package.json', { paths: [projectRoot], }); if (!hasReactNative) { const modulesToBlock = ['@react-native']; // @ts-expect-error config.resolver.blacklistRE = exclusionList( modulesToBlock.map( (m) => new RegExp( `^${escape(path.join(monorepoRoot, 'node_modules', m))}\\/.*$` ) ) ); } ``` Finally, I bumped `react-native-web` and `@expo/metro-runtime` to the latest versions. Now we can launch web-example using `yarn start --reset-cache`. ## Test plan
software-mansion · Jan 10, 2025 · f4319a0 · f4319a0
1 parent 6c55c86
commit f4319a0
Show file tree

Hide file tree

Showing 4 changed files with 147 additions and 34 deletions.
diff --git a/apps/web-example/babel.config.js b/apps/web-example/babel.config.js
@@ -23,7 +23,6 @@ module.exports = function (api) {
   if (disableBabelPlugin) {
     console.log('Starting Web example without Babel plugin.');
   } else {
-    // @ts-expect-error
     plugins.push('react-native-reanimated/plugin');
   }
 

diff --git a/apps/web-example/metro.config.js b/apps/web-example/metro.config.js
@@ -22,15 +22,20 @@ config.resolver.nodeModulesPaths = [
   path.resolve(monorepoRoot, 'node_modules'),
 ];
 
-const modulesToBlock = ['@react-native'];
+const hasReactNative = require.resolve('react-native/package.json', {
+  paths: [projectRoot],
+});
+if (!hasReactNative) {
+  const modulesToBlock = ['@react-native'];
+  // @ts-expect-error
+  config.resolver.blacklistRE = exclusionList(
+    modulesToBlock.map(
+      (m) =>
+        new RegExp(
+          `^${escape(path.join(monorepoRoot, 'node_modules', m))}\\/.*$`
+        )
+    )
+  );
+}
 
-// @ts-expect-error
-config.resolver.blacklistRE = exclusionList(
-  modulesToBlock.map(
-    (m) =>
-      new RegExp(`^${escape(path.join(monorepoRoot, 'node_modules', m))}\\/.*$`)
-  )
-);
-
-// @ts-expect-error
 module.exports = wrapWithReanimatedMetroConfig(config);
diff --git a/apps/web-example/package.json b/apps/web-example/package.json
@@ -21,11 +21,12 @@
     "react-dom": "18.3.1",
     "react-native": "0.76.5",
     "react-native-reanimated": "workspace:*",
-    "react-native-web": "0.19.11"
+    "react-native-web": "0.19.13"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@expo/metro-runtime": "^3.2.1",
+    "@expo/metro-runtime": "~4.0.0",
+    "@stylexjs/babel-plugin": "^0.10.0",
     "@types/eslint": "^8",
     "eslint": "^8.57.0",
     "prettier": "^3.3.3",

diff --git a/yarn.lock b/yarn.lock
@@ -85,7 +85,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.25.9, @babel/code-frame@npm:^7.26.2":
+"@babel/code-frame@npm:^7.25.9, @babel/code-frame@npm:^7.26.0, @babel/code-frame@npm:^7.26.2":
   version: 7.26.2
   resolution: "@babel/code-frame@npm:7.26.2"
   dependencies:
@@ -133,6 +133,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/core@npm:^7.25.8":
+  version: 7.26.0
+  resolution: "@babel/core@npm:7.26.0"
+  dependencies:
+    "@ampproject/remapping": "npm:^2.2.0"
+    "@babel/code-frame": "npm:^7.26.0"
+    "@babel/generator": "npm:^7.26.0"
+    "@babel/helper-compilation-targets": "npm:^7.25.9"
+    "@babel/helper-module-transforms": "npm:^7.26.0"
+    "@babel/helpers": "npm:^7.26.0"
+    "@babel/parser": "npm:^7.26.0"
+    "@babel/template": "npm:^7.25.9"
+    "@babel/traverse": "npm:^7.25.9"
+    "@babel/types": "npm:^7.26.0"
+    convert-source-map: "npm:^2.0.0"
+    debug: "npm:^4.1.0"
+    gensync: "npm:^1.0.0-beta.2"
+    json5: "npm:^2.2.3"
+    semver: "npm:^6.3.1"
+  checksum: 10/65767bfdb1f02e80d3af4f138066670ef8fdd12293de85ef151758a901c191c797e86d2e99b11c4cdfca33c72385ecaf38bbd7fa692791ec44c77763496b9b93
+  languageName: node
+  linkType: hard
+
 "@babel/eslint-parser@npm:^7.20.0":
   version: 7.25.9
   resolution: "@babel/eslint-parser@npm:7.25.9"
@@ -173,7 +196,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.26.3":
+"@babel/generator@npm:^7.26.0, @babel/generator@npm:^7.26.3":
   version: 7.26.3
   resolution: "@babel/generator@npm:7.26.3"
   dependencies:
@@ -331,6 +354,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-module-imports@npm:7.25.9"
+  dependencies:
+    "@babel/traverse": "npm:^7.25.9"
+    "@babel/types": "npm:^7.25.9"
+  checksum: 10/e090be5dee94dda6cd769972231b21ddfae988acd76b703a480ac0c96f3334557d70a965bf41245d6ee43891e7571a8b400ccf2b2be5803351375d0f4e5bcf08
+  languageName: node
+  linkType: hard
+
 "@babel/helper-module-imports@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/helper-module-imports@npm:7.24.7"
@@ -341,16 +374,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-module-imports@npm:7.25.9"
-  dependencies:
-    "@babel/traverse": "npm:^7.25.9"
-    "@babel/types": "npm:^7.25.9"
-  checksum: 10/e090be5dee94dda6cd769972231b21ddfae988acd76b703a480ac0c96f3334557d70a965bf41245d6ee43891e7571a8b400ccf2b2be5803351375d0f4e5bcf08
-  languageName: node
-  linkType: hard
-
 "@babel/helper-module-transforms@npm:^7.24.7, @babel/helper-module-transforms@npm:^7.24.8, @babel/helper-module-transforms@npm:^7.25.0, @babel/helper-module-transforms@npm:^7.25.2":
   version: 7.25.2
   resolution: "@babel/helper-module-transforms@npm:7.25.2"
@@ -365,6 +388,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-transforms@npm:^7.26.0":
+  version: 7.26.0
+  resolution: "@babel/helper-module-transforms@npm:7.26.0"
+  dependencies:
+    "@babel/helper-module-imports": "npm:^7.25.9"
+    "@babel/helper-validator-identifier": "npm:^7.25.9"
+    "@babel/traverse": "npm:^7.25.9"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/9841d2a62f61ad52b66a72d08264f23052d533afc4ce07aec2a6202adac0bfe43014c312f94feacb3291f4c5aafe681955610041ece2c276271adce3f570f2f5
+  languageName: node
+  linkType: hard
+
 "@babel/helper-optimise-call-expression@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/helper-optimise-call-expression@npm:7.24.7"
@@ -553,6 +589,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helpers@npm:^7.26.0":
+  version: 7.26.0
+  resolution: "@babel/helpers@npm:7.26.0"
+  dependencies:
+    "@babel/template": "npm:^7.25.9"
+    "@babel/types": "npm:^7.26.0"
+  checksum: 10/fd4757f65d10b64cfdbf4b3adb7ea6ffff9497c53e0786452f495d1f7794da7e0898261b4db65e1c62bbb9a360d7d78a1085635c23dfc3af2ab6dcba06585f86
+  languageName: node
+  linkType: hard
+
 "@babel/highlight@npm:^7.10.4, @babel/highlight@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/highlight@npm:7.24.7"
@@ -576,7 +622,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.25.9, @babel/parser@npm:^7.26.3":
+"@babel/parser@npm:^7.25.9, @babel/parser@npm:^7.26.0, @babel/parser@npm:^7.26.3":
   version: 7.26.3
   resolution: "@babel/parser@npm:7.26.3"
   dependencies:
@@ -2156,7 +2202,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.25.9":
+"@babel/traverse@npm:^7.25.7, @babel/traverse@npm:^7.25.9":
   version: 7.26.4
   resolution: "@babel/traverse@npm:7.26.4"
   dependencies:
@@ -2182,7 +2228,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.25.9, @babel/types@npm:^7.26.3":
+"@babel/types@npm:^7.25.8, @babel/types@npm:^7.25.9, @babel/types@npm:^7.26.0, @babel/types@npm:^7.26.3":
   version: 7.26.3
   resolution: "@babel/types@npm:7.26.3"
   dependencies:
@@ -2752,6 +2798,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@dual-bundle/import-meta-resolve@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "@dual-bundle/import-meta-resolve@npm:4.1.0"
+  checksum: 10/a69d804a8e8e93732ac5525f85b9366ae78ec60fa02f0d5b4f2d625e18b355ba02502cdaef616ab1eac4450b966d2a398b59577a17483e4f8a350d062357bdf4
+  languageName: node
+  linkType: hard
+
 "@egjs/hammerjs@npm:^2.0.17":
   version: 2.0.17
   resolution: "@egjs/hammerjs@npm:2.0.17"
@@ -3662,12 +3715,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@expo/metro-runtime@npm:^3.2.1":
-  version: 3.2.3
-  resolution: "@expo/metro-runtime@npm:3.2.3"
+"@expo/metro-runtime@npm:~4.0.0":
+  version: 4.0.0
+  resolution: "@expo/metro-runtime@npm:4.0.0"
   peerDependencies:
     react-native: "*"
-  checksum: 10/c798321e05943d3962e9d3b0693af14934e284c8de2de5534989d414c5a1889c96f26f229cd2cd4598d988c9e146c56fb19d9ca5b074518dbdf8110bd45f942a
+  checksum: 10/2f5bd81e4d0735dc9b99ac4f35169969eb9dc303669ddc3158f670a3c36115f87d479a6fda11c1d5acab551f1015a32271c83001e8874493f0ec58c02f8ddbf3
   languageName: node
   linkType: hard
 
@@ -6306,6 +6359,41 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@stylexjs/babel-plugin@npm:^0.10.0":
+  version: 0.10.0
+  resolution: "@stylexjs/babel-plugin@npm:0.10.0"
+  dependencies:
+    "@babel/core": "npm:^7.25.8"
+    "@babel/helper-module-imports": "npm:^7.22.15"
+    "@babel/traverse": "npm:^7.25.7"
+    "@babel/types": "npm:^7.25.8"
+    "@dual-bundle/import-meta-resolve": "npm:^4.1.0"
+    "@stylexjs/shared": "npm:0.10.0"
+    "@stylexjs/stylex": "npm:0.10.0"
+  checksum: 10/42e676a35096055549c5838e5484dc5951305a422e7087687f2034347cbafd04fb4d2bbf0cbb2ed0efffa37a55074052fcb75737a11809d3d62e763419885d60
+  languageName: node
+  linkType: hard
+
+"@stylexjs/shared@npm:0.10.0":
+  version: 0.10.0
+  resolution: "@stylexjs/shared@npm:0.10.0"
+  dependencies:
+    postcss-value-parser: "npm:^4.1.0"
+  checksum: 10/8472c331368907e575eed3e3a9127f2b017f4ba21a64598890c059d6e8c0ed22c4764adb8dffbfffc018d71009068e7808c2b5ee191c567e9a3f38bc846ed98c
+  languageName: node
+  linkType: hard
+
+"@stylexjs/stylex@npm:0.10.0":
+  version: 0.10.0
+  resolution: "@stylexjs/stylex@npm:0.10.0"
+  dependencies:
+    css-mediaquery: "npm:^0.1.2"
+    invariant: "npm:^2.2.4"
+    styleq: "npm:0.1.3"
+  checksum: 10/8675c3a65453f5709dc7131fc7639e82b3c7dcda39f1da5debb6b51ad68169f00cdb0bc937b8719ef3576e17f6f1e533ba8892bce8e87ae0d939733de7078a11
+  languageName: node
+  linkType: hard
+
 "@stylexjs/stylex@npm:^0.7.5":
   version: 0.7.5
   resolution: "@stylexjs/stylex@npm:0.7.5"
@@ -18174,6 +18262,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-web@npm:0.19.13":
+  version: 0.19.13
+  resolution: "react-native-web@npm:0.19.13"
+  dependencies:
+    "@babel/runtime": "npm:^7.18.6"
+    "@react-native/normalize-colors": "npm:^0.74.1"
+    fbjs: "npm:^3.0.4"
+    inline-style-prefixer: "npm:^6.0.1"
+    memoize-one: "npm:^6.0.0"
+    nullthrows: "npm:^1.1.1"
+    postcss-value-parser: "npm:^4.2.0"
+    styleq: "npm:^0.1.3"
+  peerDependencies:
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  checksum: 10/65e0660fb37c1f7e3864a7b506acdd3bbf249de516166775cbf2f371bc28f6e965bc01cbd214bfe820c1a933aee58b6fb29298ccd0dc5f412f147a57e7126dd9
+  languageName: node
+  linkType: hard
+
 "react-native-worklets@workspace:packages/react-native-worklets":
   version: 0.0.0-use.local
   resolution: "react-native-worklets@workspace:packages/react-native-worklets"
@@ -21280,10 +21387,11 @@ __metadata:
   resolution: "web-example@workspace:apps/web-example"
   dependencies:
     "@babel/core": "npm:^7.20.0"
-    "@expo/metro-runtime": "npm:^3.2.1"
+    "@expo/metro-runtime": "npm:~4.0.0"
     "@expo/vector-icons": "npm:^14.0.0"
     "@react-navigation/native": "npm:^7.0.0"
     "@shopify/flash-list": "npm:^1.7.1"
+    "@stylexjs/babel-plugin": "npm:^0.10.0"
     "@types/eslint": "npm:^8"
     common-app: "workspace:*"
     eslint: "npm:^8.57.0"
@@ -21293,7 +21401,7 @@ __metadata:
     react-dom: "npm:18.3.1"
     react-native: "npm:0.76.5"
     react-native-reanimated: "workspace:*"
-    react-native-web: "npm:0.19.11"
+    react-native-web: "npm:0.19.13"
     serve: "npm:^14.2.3"
     typescript: "npm:~5.3.0"
   languageName: unknown