Error: Cannot find module 'react-native-codegen/package.json'

[k0nserv]

Environment

react-native info

System:
    OS: macOS 11.2.3
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 777.25 MB / 32.00 GB
    Shell: 5.8 - /usr/local/bin/zsh
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    Yarn: Not Found
    npm: 6.14.2 - ~/.nvm/versions/node/v12.16.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /Users/hugotunius/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 26, 27, 28, 29, 30
      Build Tools: 28.0.3, 29.0.2
      System Images: android-21 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6953283
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_191 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: ^3.2.1 => 3.2.1
    react: 17.0.1 => 17.0.1
    react-native: 0.64.0 => 0.64.0
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Upgrading version

From 0.61.5 to 0.64.0

Problem

The codegen script in FBReactNativeSpec only works under a specific project structure. In our project it fails to find the path for react-native-codegen due to the project structure.

This causes the following error:

Error: Cannot find module 'react-native-codegen/package.json'
Require stack:
- /Users/hugotunius/S/skyscanner-app/ios/Pods/[eval]
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:982:15)
    at Function.resolve (internal/modules/cjs/helpers.js:83:19)
    at [eval]:1:45
    at Script.runInThisContext (vm.js:120:20)
    at Object.runInThisContext (vm.js:311:38)
    at Object.<anonymous> ([eval]-wrapper:10:26)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at evalScript (internal/process/execution.js:94:25)
    at internal/main/eval_string.js:23:3 {
  code: 'MODULE_NOT_FOUND',

The problem is the following line:

CODEGEN_PATH=$("$NODE_BINARY" -e "console.log(require('path').dirname(require.resolve('react-native-codegen/package.json')))")

in scripts/generate-specs.sh

This works in projects like those that react-native init generates because the script will be ran from ios/Pods which will correctly resolve react-native-codegen to node_modules/react-native-codegen. This is because node will look for node packages recursively upwards in the folder hierarchy an eventually find package.json and node_module in the project root.

However, in our case we have the following structure:

.
├── ios
│   ├── Pods
├── react-native
│   ├── flow-typed
│   ├── node_modules
│   ├── scripts
│   ├── src
│   └── tests

56 directories

This means that generate-specs.sh which is ran from ios/Pods never finds react-native-codegen which is in react-ntaive/node_modues/react-native-codegen.

Solution

So far the solution we've been exploring is to modify NODE_PATH with something like NODE_PATH=$NODE_PATH:"$(realpath $(pwd)/../../react-native/node_modules)".

Another thing that works is https://raw.githubusercontent.com/facebook/react-native/eb0a918577ae351b7e527e07c313f60d43562b22/scripts/generate-specs.sh > node_modules/react-native/scripts-generate-specs.sh i.e. taking the generate-specs.sh script from master.

However, we are interested in other solutions.

[neilkimmett]

We're also hitting this issue. Where do you modify your NODE_PATH?

[k0nserv]

We modify the build step that's generated for FBReactNativeSpec as part of the post_install in the Podfile.

Our modification consists of:

1. Saving the original NODE_PATH
2. Adding the React Native folder to it with export NODE_PATH=$NODE_PATH:$PATH_TO_REACT_NATIVE
3. Runing the original script
4. Setting the NODE_PATH back to its original value.

Note, realpath isn't available in all environments, but there is a bash native way to do the same thing.

[neilkimmett]

We've managed to fix this for now by using patch-package to patch the script and add an explicit path, here's the patch we apply:

diff --git a/node_modules/react-native/scripts/generate-specsold.sh b/node_modules/react-native/scripts/generate-specs.sh
index aed955e01e..553a34ac14 100755
--- a/node_modules/react-native/scripts/generate-specs.sh
+++ b/node_modules/react-native/scripts/generate-specs.sh
@@ -62,7 +62,7 @@ main() {
     exit 1
   fi
 
-  CODEGEN_PATH=$("$NODE_BINARY" -e "console.log(require('path').dirname(require.resolve('react-native-codegen/package.json')))")
+  CODEGEN_PATH=$("$NODE_BINARY" -e "console.log(require('path').dirname(require.resolve('react-native-codegen/package.json',{paths:['$RN_DIR']})))")
 
   # Special case for running CodeGen from source: build it
   if [ ! -d "$CODEGEN_PATH/lib" ]; then