From f4319a05ba0ae533f822a8f713f0dc6cba058057 Mon Sep 17 00:00:00 2001 From: Tomek Zawadzki Date: Fri, 10 Jan 2025 17:03:34 +0100 Subject: [PATCH] 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 --- apps/web-example/babel.config.js | 1 - apps/web-example/metro.config.js | 25 +++--- apps/web-example/package.json | 5 +- yarn.lock | 150 ++++++++++++++++++++++++++----- 4 files changed, 147 insertions(+), 34 deletions(-) diff --git a/apps/web-example/babel.config.js b/apps/web-example/babel.config.js index 4a7fa7f8262..6ff0c253624 100644 --- 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 index bbf14070470..47c511c2d48 100644 --- 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 index d747b792d1f..7a711e62736 100644 --- 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 index bd0cee2cd23..86e76d600ef 100644 --- 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