[Web]Nx Project with reanimated and react-native-elements failed to build

Description

We made an update from version 1.13.3 to 2.2.0 of the library. And since then, nothing is working as expected.

From a blank project, once added the dependencies, here is the error we have :

ERROR in …/…/node_modules/react-native-reanimated/lib/reanimated2/platform-specific/RNRenderer.js 3:0-90 Module not found: Error: Can’t resolve ‘react-native/Libraries/Renderer/shims/ReactNative’ in ‘F:\Projects\UMJ\mobile-web\node_modules\react-native-reanimated\lib\reanimated2\platform-specific’

Just to give detailled context, we are using nx in a monorepo project. For the web part, please find below the webpack.js config :

const getWebpackConfig = require('@nrwl/react/plugins/webpack');
const path = require('path')

function getCustomWebpackConfig(webpackConfig) {
  const config = getWebpackConfig(webpackConfig);
  const isProduction = webpackConfig.mode === 'production';

  if (!isProduction) {
    config.resolve.alias = {
      'react-native': 'react-native-web',
    };

    config.module.rules.push(
      {
        test: /\.ttf$/,
        loader: require.resolve('file-loader'),
        include: [
          path.resolve(__dirname, "../../node_modules/react-native-vector-icons")
        ],
        options: { esModule: false, name: 'static/media/[path][name].[ext]' },
      },
      {
        test: /\.(gif|jpeg|jpg|png|svg)$/,
        use: {
          loader: "url-loader",
          options: {
            name: "[name].[ext]",
            esModule: false,
          }
        }
      },
      {
        test: /\.(js|jsx)$/,
        include: [
          path.resolve(__dirname, "src/"),
          path.resolve(__dirname, "../../node_modules/deepmerge/"),
          path.resolve(__dirname, "../../node_modules/react-native-vector-icons/"),
          path.resolve(__dirname, "../../node_modules/react-native-elements/"),
          path.resolve(__dirname, "../../node_modules/react-native-ratings/"),
          path.resolve(__dirname, "../../node_modules/react-native-reanimated/")
        ],
        use: {
          loader: require.resolve('@nrwl/web/src/utils/web-babel-loader.js'),
          options: {
            presets: [
              [
                '@nrwl/react/babel',
                {
                  runtime: 'automatic',
                  useBuiltIns: 'usage',
                },
              ],
            ],
            plugins: ['react-native-web'],
          },
        },
      }
    );
  }

  return {
    ...config,
    node: { global: true }, // Fix: "Uncaught ReferenceError: global is not defined", and "Can't resolve 'fs'".
  };
}

module.exports = getCustomWebpackConfig;

and the .babelrc configuration :

{
  "presets": [
    [
      "@nrwl/react/babel",
      {
        "runtime": "automatic"
      }
    ]
  ],
  "plugins": []
}

Expected behavior

The project compile fine.

Actual behavior & steps to reproduce

The actual behavior is to have the above errors.

Snack or minimal code example

Just start a fresh NX project and add a application. Here are the commands :

• Create the workspace npx create-nx-workspace sample --preset=react-native
• Create the application nx generate application website

Package versions

Here are the list of my dependencies :

{package|version| | core-js | 3.6.5 |
| install | 0.13.0 |
| npm | 8.1.1 |
| react | 17.0.2 |
| react-dom | 17.0.2 |
| react-native | 0.66.1 |
| react-native-elements | 3.4.2 |
| react-native-gesture-handler | 1.10.3 |
| react-native-ratings | 8.1.0 |
| react-native-reanimated | 2.2.0 |
| react-native-safe-area-context | 3.2.0 |
| react-native-screens | 3.3.0 |
| react-native-svg | 12.1.1 |
| react-native-svg-transformer | 0.14.3 |
| react-native-style-tachyons | 4.2.0 |
| react-native-vector-icons | 8.1.0 |
| @react-navigation/drawer | 6.1.8 |
| @react-navigation/native | 6.0.6 |
| @react-navigation/native-stack | 6.2.5 |
| react-native-web | 0.17.5 |
| regenerator-runtime | 0.13.7 |
| tslib | 2.0.0 |

I’m using Java 11 but this is not related to the bug because the mobile version of the application work perfectly fine.

Affected platforms

• Android
• iOS
• Web

[nandorojo]

Similar issue for me in a monorepo on 2.2.3. Downgrading to 2.2.2 and clearing all caches solves it (deleted .expo, ios, node_modules).

Important to put "2.2.2" and not "^2.2.0"

This is what happened when I ran expo run:ios

yarn expo run:ios
yarn run v1.22.5
$ /Users/fernandorojo/Developer/madison-hacks/zeeg/node_modules/.bin/expo run:ios
✔ Created native project | gitignore already synced
⚠️  Skipped Metro config updates:
› Existing Metro config found; not overwriting.
› You will need to extend the default @expo/metro-config in your Metro config.
  Learn more: https://docs.expo.dev/guides/customizing-metro

✔ Updated package.json and added index.js entry point for iOS and Android
🧶 Using Yarn to install packages. Pass --npm to use npm instead.
✔ Installed JavaScript dependencies 1392ms
» ios: icon: This is the image that your app uses on your home screen, you will need to configure it manually.
✔ Config synced
⚠️  Something went wrong running `pod install` in the `ios` directory.
Command `pod install` failed.
└─ Cause: Invalid `Podfile` file: 
[!] Invalid `RNReanimated.podspec` file: No such file or directory @ rb_sysopen - /Users/fernandorojo/Developer/madison-hacks/zeeg/examples/expo/node_modules/react-native-reanimated/node_modules/react-native/package.json.

 #  from /Users/fernandorojo/Developer/madison-hacks/zeeg/examples/expo/node_modules/react-native-reanimated/RNReanimated.podspec:11
 #  -------------------------------------------
 #    # Example app
 >    reactVersion = JSON.parse(File.read(File.join(__dir__, "node_modules", "react-native", "package.json")))["version"]
 #  end
 #  -------------------------------------------
.

 #  from /Users/fernandorojo/Developer/madison-hacks/zeeg/examples/expo/ios/Podfile:12
 #  -------------------------------------------
 #    use_expo_modules!
 >    config = use_native_modules!
 #  
 #  -------------------------------------------

› Planning build

› 0 error(s), and 0 warning(s)

Failed to build iOS project. "xcodebuild" exited with error code 65.
To view more error logs, try building the app with Xcode directly, by opening /Users/fernandorojo/Developer/madison-hacks/zeeg/examples/expo/ios/zeegexample.xcodeproj.

Command line invocation:
    /Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -project /Users/fernandorojo/Developer/madison-hacks/zeeg/examples/expo/ios/zeegexample.xcodeproj -configuration Debug -scheme zeegexample -destination id=DB7720EC-BF3F-4824-9904-8C9248DCE871

User defaults from command line:
    IDEPackageSupportUseBuiltinSCM = YES

note: Using new build system
note: Building targets in parallel
note: Planning build
note: Analyzing workspace
note: Constructing build description
note: Build preparation complete
/Users/fernandorojo/Developer/madison-hacks/zeeg/examples/expo/ios/Pods/Target Support Files/Pods-zeegexample/Pods-zeegexample.debug.xcconfig:1:1: error: unable to open file (in target "zeegexample" in project "zeegexample")
/Users/fernandorojo/Developer/madison-hacks/zeeg/examples/expo/ios/Pods/Target Support Files/Pods-zeegexample/Pods-zeegexample.debug.xcconfig:1:1: error: unable to open file (in target "zeegexample" in project "zeegexample")
/Users/fernandorojo/Developer/madison-hacks/zeeg/examples/expo/ios/Pods/Target Support Files/Pods-zeegexample/Pods-zeegexample.debug.xcconfig:1:1: error: unable to open file (in target "zeegexample" in project "zeegexample")
/Users/fernandorojo/Developer/madison-hacks/zeeg/examples/expo/ios/Pods/Target Support Files/Pods-zeegexample/Pods-zeegexample.debug.xcconfig:1:1: error: unable to open file (in target "zeegexample" in project "zeegexample")



** BUILD FAILED **

Build logs written to /Users/fernandorojo/Developer/madison-hacks/zeeg/examples/expo/.expo/xcodebuild.md

[Ubax]

Thanks If there are any more problems please let us know