Add missing @stylexjs/babel-plugin in web-example

[tomekzaw]

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:

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