microsoft / microsoft/react-native-windows
Several issues regarding `npx react-native-windows-init --projectType lib`
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 17.3k
- Forks
- 1.2k
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 33
Description
EDIT: I have been attempting to create a Turbo Module with backwards compatibility. These issues were also present with js module, but it's possible other options are unaffected. Also, Android does not have any of these issues.
Problem Description
- Inconsistent issue, but about 50% of the time, initial build from this step fails with:
error : Designtime build failed for project 'C:\Users\<USER-NAME>\Desktop\ReactNative\react-native-document-picker\node_modules\react-native-windows\Common\Common.vcxproj' configuration 'Debug|x64'. IntelliSense might be unavailable.
Set environment variable TRACEDESIGNTIME = true and restart Visual Studio to investigate.
Running build again returns:
Build started...
========== Build: 0 succeeded, 0 failed, 6 up-to-date, 0 skipped ==========
========== Build started at 5:34 PM and took 00.276 seconds ==========
as though it was successful, so possibly ignorable?
- Following the last 4 steps from this step leads to a situation where metro opens successfully and then does nothing. Not frozen, just awaiting some order I can't give it. Is there supposed to be a windows button in the console like there is for android and ios?
So the rest of these steps are done while skipping that portion.
-
Module template doesn't match RN template.
L"ReactNativeAwesomeModule"should beL"AwesomeModule"to match the call from the RN template- The example method doesn't match the template example method, which is a simple
multiply.
-
From there, following the Fancy math example leads to a host of errors. In order:
Function returns undefined.
TypeError: Cannot read properties of undefined (reading 'then')
This error is located at:
in App
in RCTView (created by TextAncestorContext)
in View (created by AppContainer)
in RCTView (created by TextAncestorContext)
in View (created by AppContainer)
in AppContainer
in DocumentPickerExample(RootComponent)
Solved by following this promise example
And something much harder to google for:
Invariant Violation: Failed to call into JavaScript module method RCTDeviceEventEmitter.emit(). Module has not been registered as callable. Bridgeless Mode: false. Registered callable JavaScript modules (n = 0): .
A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
I vaguely understand that issue, but I don't see why it would appear. Searching through the files, references seem to be correct. (i.e. If you replace all the code in App.tsx with just showing a button or something, it behaves correctly). Possibly solved by this.
Followed by a series of issues of the form:
Invariant Violation: No callback found with cbID 0 and callID 0 for module <unknown>. Args: '[{"app_state":"active"}]'
Are these where that callback change to the .ts file are necessary?
Some of these issues I've found half-hacks for, but ultimately, I have been unable to get it to function, and some clarity would be greatly appreciated.
Steps To Reproduce
1a. Either follow the native module setup guide using the RN template to create a C++/winRT library
1b. Or simply use my repro and run yarn from the main folder
- Attempt to run the module with
yarn example windows
Expected Results
Successful module template, ready to write in.
CLI version
10.2.0
Environment
System:
OS: Windows 10 10.0.19045
CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
Memory: 7.15 GB / 15.93 GB
Binaries:
Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 9.2.0 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 29, 30, 31, 33
Build Tools: 29.0.2, 30.0.2, 30.0.3, 31.0.0, 33.0.0, 33.0.1
System Images: android-28 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
Android NDK: 22.1.7171670
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
Versions: 10.0.17763.0, 10.0.19041.0, 10.0.22000.0, 10.0.22621.0
IDEs:
Android Studio: AI-221.6008.13.2211.9514443
Visual Studio: 17.5.33424.131 (Visual Studio Community 2022), 16.11.33328.57 (Visual Studio Community 2019)
Languages:
Java: 11.0.18
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.4 => 0.71.4
react-native-windows: 0.71.4 => 0.71.4
npmGlobalPackages:
*react-native*: Not Found
Target Platform Version
10.0.19041
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/MacKenzieHnC/react-native-document-picker
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 native module setup guide, the linked react-native-document-picker repro, and the yarn example windows entry point. Reproduce the initial build, Metro, template, and runtime errors separately, then compare the generated module with the React Native template and document or fix each confirmed discrepancy.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cpp, react-native, typescript
- Domain
- cli, desktop, developer-experience
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100