cpp-lib template fails on lib created by create-react-native-library

hsjoberg commented 1 month ago

Problem Description

Hi, I'm trying to set up a lib from create-react-native-library by following https://github.com/microsoft/react-native-windows/pull/12481 and https://github.com/microsoft/react-native-windows/wiki/Using-the-new-architecture-templates.

However, on a fresh lib without any coding changes it fails with the following errors in Metro:

 (NOBRIDGE) ERROR  TypeError: Cannot read property 'S' of undefined, js engine: hermes
 (NOBRIDGE) ERROR  TypeError: Cannot read property 'render' of undefined, js engine: hermes
 (NOBRIDGE) ERROR  TypeError: Cannot read property 'S' of undefined, js engine: hermes
 (NOBRIDGE) ERROR  TypeError: Cannot read property 'render' of undefined, js engine: hermes

Steps To Reproduce

I've uploaded a repro here. I'm just doing the following without any code modifications:

Create a new lib:


npx --yes create-react-native-library@latest --slug rnwturbo --description rnwturbo --author-name "rnwturbo" --author-email rnwturbo@rnwturbo.com --author-url http://example.com --repo-url http://example.com --languages kotlin-objc --type module-new --react-native-version 0.76.0-rc.1-7345250 --example test-app rnwturbo

cd rnwturbo

2. Add latest react-native-windows canary build to the project in order to get the cpp-lib template:

yarn add react-native-windows@0.0.0-canary.868

3. Add windows to the lib

yarn react-native init-windows --template cpp-lib --overwrite --logging

4. Run the example app to observe the error (run twice depending on if you run into #13599)

yarn example windows


### Expected Results

_No response_

### CLI version

14.0.0

### Environment

```markdown
System:
  OS: Windows 11 10.0.22631
  CPU: "(32) x64 AMD Ryzen 9 7950X3D 16-Core Processor          "
  Memory: 44.58 GB / 95.71 GB
Binaries:
  Node:
    version: 21.6.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 3.6.1
    path: C:\Program Files\nodejs\yarn.CMD
  npm:
    version: 10.2.4
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.18362.0
      - 10.0.19041.0
      - 10.0.22621.0
IDEs:
  Android Studio: AI-241.19072.14.2412.12360217
  Visual Studio:
    - 17.11.35312.102 (Visual Studio Community 2022)
Languages:
  Java:
    version: 17.0.3
    path: /c/Program Files/ojdkbuild/java-17-openjdk-17.0.3.0.6-1/bin/javac
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.0-rc.1
    wanted: 0.76.0-rc.1
  react-native-windows:
    installed: 0.0.0-canary.868
    wanted: 0.0.0-canary.868
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: false
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Community Modules

No response

Target Platform Version

10.0.22621

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2022

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository

https://github.com/hsjoberg/rnwturbo

hsjoberg commented 1 month ago

It fails very early. In the registration of the app, AppRegistry.registerComponent(appName, () => App);.

I've tracked the issue to

registerComponent() (react-native-windows\Libraries\ReactNative\AppRegistry.js)
  ->
renderApplication() (react-native-windows\Libraries\ReactNative\renderApplication.js)
  ->
renderElement() (react-native-windows\Libraries\ReactNative\RendererImplementation.js)
  ->
react-native-windows\Libraries\Renderer\shims\ReactFabric.js -> react-native-windows\Libraries\Renderer\implementations\ReactFabric-dev.js

But I lost trace of the error in ReactFabric-dev.js because it's the whole JS Fabric codebase of 16662 lines of code in there. So that's why I'm checking if someone is willing to help figure this one out.

shirakaba commented 1 month ago

Just curious - and this probably isn't the answer because the error stack does say you're using Hermes rather than Chromium - but have you tried running the app with remote debugging disabled? Certain native module features don't work with remote debugging enabled.

From the React Native Community CLI, press D to open the dev menu (this opens a panel alongside the app's window) and select "Disable Remote Debugging".

Or alternatively, apply the following change to App.cpp:

- InstanceSettings().UseWebDebugger(true);
+ InstanceSettings().UseWebDebugger(false);

hsjoberg commented 1 month ago

Hi @shirakaba, thank you for the suggestion. It doesn't appear to make any difference unfortunately. Tried explicitly setting it false with code.

the error stack does say you're using Hermes rather than Chromium

Yeah AFAICT Hermes is on by-default in RNW new arch.

chrisglein commented 1 month ago

@Yajur-Grover has been spending some time doing similar new modules like this. Can you give a look and see if you can help?

It does look like it's getting pretty far before the failure. Code is being generated and building, but fails at runtime so maybe something's wrong with the generated code?

chrisglein commented 1 month ago

FWIW this might be a problem:

react-native: installed: 0.76.0-rc.1 wanted: 0.76.0-rc.1 react-native-windows: installed: 0.0.0-canary.868 wanted: 0.0.0-canary.868

We don't have our first preview of RNW on 0.76. But... very soon? @TatianaKapos FYI If you're on a canary release you'll need to have the matching RN core nightly that goes with that. When we have the RNW 0.76 preview up that'll get easier.

hsjoberg commented 1 month ago

Hi @chrisglein, thank you for your replies.

FWIW this might be a problem:

react-native: installed: 0.76.0-rc.1 wanted: 0.76.0-rc.1 react-native-windows: installed: 0.0.0-canary.868 wanted: 0.0.0-canary.868

My bad! I was using 0.76.0-rc.1 because create-react-native-library doesn't have templates for nightly builds. Anyway, I tried with the react-native version matching the current latest canary.

npm show react-native-windows@0.0.0-canary.871 peerDependencies.react-native
0.76.0-nightly-20240909-143f1ad29

But I'm getting nuget/npm package mismatch for some reason. I suppose it makes sense to wait until the first preview of RNW 0.76 is ready, as you said.

 ✖ Build failed with message 4:10>C:\Users\CocoT1\.nuget\packages\microsoft.reactnative.cxx\0.0.1-0\build\native\Microsoft.ReactNative.VersionCheck.targets(96,5): error : Mismatch detected between npm package versions and nuget package version. [C:\Users\CocoT1\Projects\rnwturbo\windows\rnwturbo\rnwturbo.vcxproj]. Check your build configuration.

hsjoberg commented 1 month ago

I just tried the React Native Windows 0.76.0-preview.1 and it works. ⭐

npx --yes create-react-native-library@latest --slug rnwturbo --description rnwturbo --author-name "rnwturbo" --author-email rnwturbo@rnwturbo.com --author-url http://example.com --repo-url http://example.com --languages kotlin-objc --type module-new --react-native-version 0.76.0-rc.0 --example test-app rnwturbo

cd rnwturbo

yarn add react-native-windows@0.76.0-preview.1

yarn react-native init-windows --template cpp-lib --overwrite --logging

yarn example windows # twice if you run into #13599

microsoft / react-native-windows