New architecture codegen not working and wrong imports

[gastonmorixe]

Description

Similar to #662 #667 #628

In my case npx not found. Used RCT_NEW_ARCH_ENABLED=1 pod install for new arch.

My work around was removing the pre-action build script and calling it manually from the terminal

$ npx bob build --target codegen

Then I had a build error ComponentDescriptors.h not found. I solved it with:

+#import <ComponentDescriptors.h>
+#import <EventEmitters.h>
+#import <Props.h>
+#import <RCTComponentViewHelpers.h>
-#import <react/renderer/components/RNTwilioVideoWebrtcProViewSpec/ComponentDescriptors.h>
-#import <react/renderer/components/RNTwilioVideoWebrtcProViewSpec/EventEmitters.h>
-#import <react/renderer/components/RNTwilioVideoWebrtcProViewSpec/Props.h>
-#import <react/renderer/components/RNTwilioVideoWebrtcProViewSpec/RCTComponentViewHelpers.h>

Now it builds! :rock

Packages

• create-react-native-library
• react-native-builder-bob

Selected options

❯ npx create-react-native-library@latest react-native-twilio-video-webrtc-pro
create-react-native-library@0.42.2

✔ What is the name of the npm package? … react-native-twilio-video-webrtc-pro
✔ What is the description for the package? … Twilio Video WebRTC for React Native.
✔ What is the name of package author? … Gaston Morixe
✔ What is the email address for the package author? … gaston@gastonmorixe.com
✔ What is the URL for the package author? … https://github.com/gastonmorixe
✔ What is the URL for the repository? … https://github.com/gastonmorixe/react-native-twilio-video-webrtc-pro
✔ What type of library do you want to develop? › Fabric view with backward compat
✔ What type of example app do you want to create? › Vanilla
✔ Project created successfully at react-native-twilio-video-webrtc-pro!

Link to repro

https://github.com/gastonmorixe/react-native-twilio-video-webrtc-pro

Environment

System:
OS: macOS 15.2
CPU: (10) arm64 Apple M1 Max
Memory: 257.14 MB / 32.00 GB
Shell:
version: 3.7.1
path: /opt/homebrew/bin/fish
Binaries:
Node:
version: 22.9.0
path: ~/.local/state/fnm_multishells/63343_1729973623280/bin/node
Yarn:
version: 3.6.1
path: ~/.local/state/fnm_multishells/63343_1729973623280/bin/yarn
npm:
version: 10.9.0
path: ~/.local/state/fnm_multishells/63343_1729973623280/bin/npm
Watchman:
version: 2024.10.21.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.15.2
path: /Users/gaston/.gem/ruby/3.3.0/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.1
- iOS 18.1
- macOS 15.1
- tvOS 18.1
- visionOS 2.1
- watchOS 11.1
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode:
version: 16.1/16B40
path: /usr/bin/xcodebuild
Languages:
Java: Not Found
Ruby:
version: 3.3.5
path: /Users/gaston/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli":
installed: 15.0.0-alpha.2
wanted: 15.0.0-alpha.2
react:
installed: 18.3.1
wanted: 18.3.1
react-native:
installed: 0.76.0
wanted: 0.76.0
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true

[gastonmorixe]

ok, for the path import issue this solves it as well: instead of changing the imports change the package.json's codegenConfig like:

  "codegenConfig": {
    "name": "RNTwilioVideoWebrtcProViewSpec",
    "type": "all",
    "jsSrcsDir": "src",
    "outputDir": {
-      "ios": "ios/generated",
-      "android": "android/generated"
+      "ios": "ios/generated/react/renderer/components",
+      "android": "android/generated/react/renderer/components"
    },
    "android": {
      "javaPackageName": "com.twiliovideowebrtcpro"
    },
    "includesGeneratedCode": true
  },

And you may need this change as well in the podspec (in the root folder):

+  # Add this line to preserve the header structure
+  s.header_mappings_dir = "ios/generated"

[sergeymild]

the same problem, after create library with cli nothing works, and even if i fix codegen outputDir i see another error 'ReactCommon/TurboModule.h' file not found

[atlj]

Hey looks like this is also happening on CI https://github.com/callstack/react-native-builder-bob/actions/runs/11505593202/job/32027639990. I'm taking a look now 👀

[atlj]

Okay so I got the chance to take a look at this, seems like this is caused because when we generate the codegen specs to ship them with the library, we don't need that import path that starts with react. So in this case, your initial fix where you only import with the header names without any slashes is the preferable approach.

I don't think that changing the output-dir and adding header_mappings_dir is great since:

1. those imports are pretty lengthy and just add confusion to the header file source code
2. We aren't going to support the use case where the user doesn't ship their codegen scaffold code in the future.
3. This would add fragmentation to create a react native library.

I'm going to create a PR using the first approach. Thanks for the issue!

[gastonmorixe]

My pleasure @atlj thanks for the work and upcoming fix