microsoft / microsoft/react-native-windows

Several issues regarding `npx react-native-windows-init --projectType lib`

Open
#11,429 10 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug Workstream: Developer Experience
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
  1. 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?

  1. 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.

  1. Module template doesn't match RN template.

    • L"ReactNativeAwesomeModule" should be L"AwesomeModule" to match the call from the RN template
    • The example method doesn't match the template example method, which is a simple multiply.
  2. 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

  1. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.