microsoft / microsoft/react-native-windows
Unable to include <react/bridging/Bridging.h>
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 17.3k
- Forks
- 1.2k
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 33
Description
From this discussion: https://github.com/microsoft/react-native-windows/discussions/13985
Hi, I have been studying #10909 and the JSI TurboModule stuff in vnext/Microsoft.ReactNative.IntegrationTests for some time and finally decided to give a shot at making a TurboModule with Codegen and JSI.
I made a lib using create-react-native-library (https://github.com/microsoft/react-native-windows/issues/13884#issuecomment-2388653591):
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
Ran react-native-windows-codgen with flag --modulesCxx to get the JSI codegen:
npx react-native-windows-codegen --libraryName "rnwturbo" --file .\src\NativeRnwturbo.ts --outputDirectory .\windows\rnwturbo\codegen-jsi --modulesCxx
Writing windows\rnwturbo\codegen-jsi\.clang-format
Writing windows\rnwturbo\codegen-jsi\rnwturboJSI.h
Writing windows\rnwturbo\codegen-jsi\rnwturboJSI-generated.cpp
and made a simple implementation.
windows\rnwturbo\rnwturbo.{h|cpp}:
#include "codegen-jsi/rnwturboJSI.h"
#include <winrt/Microsoft.ReactNative.h>
#include <winrt/Windows.Foundation.Collections.h>
#include <TurboModuleProvider.h>
namespace facebook::react {
class Rnwturbo : react::NativeRnwturboCxxSpecJSI {
public:
Rnwturbo(std::shared_ptr<react::CallInvoker> jsInvoker);
double multiply(jsi::Runtime &rt, double a, double b);
};
struct RnwturboPackageProvider
: winrt::implements<RnwturboPackageProvider, winrt::Microsoft::ReactNative::IReactPackageProvider> {
void CreatePackage(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) noexcept {
winrt::Microsoft::ReactNative::AddTurboModuleProvider<Rnwturbo>(packageBuilder, L"RnwturboCxx");
}
};
}
#include "rnwturbo.h"
namespace facebook::react {
Rnwturbo::Rnwturbo(std::shared_ptr<react::CallInvoker> jsInvoker)
: NativeRnwturboCxxSpecJSI(std::move(jsInvoker)) {}
double Rnwturbo::multiply(double a, double b) {
return a * b;
}
}
I don't know how to autolink JSI TurboModules, but as a quick hack I changed example\windows\rnwturboExample\rnwturboExample.cpp in the example app to manually link with the RnwturboPackageProvider, as shown in https://github.com/microsoft/react-native-windows/blob/a3fc8a9c0893ced961677523820060f3df8947fb/vnext/Microsoft.ReactNative.IntegrationTests/JsiTurboModuleTests.cpp#L155:
#include "../../../windows/rnwturbo/rnwturbo.h"
[...]
// RegisterAutolinkedNativeModulePackages(host.PackageProviders());
host.PackageProviders().Append(winrt::make<facebook::react::RnwturboPackageProvider>());
Now, everything is set as far as I understand. I also later found the very helpful comments in #13886 confirming my understanding of things.
But when running yarn example windows --no-autolink I get this:
✖ Build failed with message 2:10>C:\Users\CocoT1\Projects\rnwturbo\windows\rnwturbo\codegen-jsi\rnwturboJSI.h(13,10): error C1083: Cannot open include file: 'react/bridging/Bridging.h': No such file or directory [C:\Users\CocoT1\Projects\rnwturbo\windows\rnwturbo\rnwturbo.vcxproj]. Check your build configuration.
So this is coming from the JSI codegen file that react-native-windows-codegen creates and it's failing to import Meta's JSI file(s).
I've tried changing the import path to some other variants but cannot get the file to be imported.
For clarity, the file just looks like normal JSI codegen code:
#pragma once
#include <ReactCommon/TurboModule.h>
#include <react/bridging/Bridging.h>
namespace facebook::react {
class JSI_EXPORT NativeRnwturboCxxSpecJSI : public TurboModule {
protected:
NativeRnwturboCxxSpecJSI(std::shared_ptr<CallInvoker> jsInvoker);
public:
virtual double multiply(jsi::Runtime &rt, double a, double b) = 0;
};
// etc
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the generated windows/rnwturbo/codegen-jsi/rnwturboJSI.h and the windows/rnwturbo/rnwturbo.vcxproj, then reproduce the build using the issue's react-native-windows-codegen command and yarn example windows --no-autolink. Trace how the project resolves ReactCommon/TurboModule.h and react/bridging/Bridging.h. Done means the generated JSI header builds without a missing-header error in the example app.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cpp, react-native
- Domain
- build-system, desktop
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100