Problem Debugging and Building React Native App Using Visual Studio

[abrahamgalue]

Problem Description

I am a new React Native user and I was following the official documentation of React Native and Microsoft https://microsoft.github.io/react-native-windows/docs/getting-started to build Windows applications using this technology. I followed the guide to create a new project from scratch, configure the development environment and install the necessary tools to carry it out. When running the project from the command npx react-native run-windows it worked perfectly and when I edited the code the changes were reflected on that side. My experience was satisfactory.

The problem came when I wanted to build my application and I encountered problems in the Visual Studio terminal. The problems arise when I try to perform two actions from Visual Studio:

1. Running a React Native Windows App with Visual Studio
2. Build a React Native Windows App with Visual Studio

I have followed these two actions to the letter from the official documentation since I do not know of any other ways to do it.

The outputs in the Visual Studio terminal are as follows:

1. The command "npx --yes @react-native-community/cli autolink-windows --check --sln "windows\proyectoTrueba.sln" --proj "windows\proyectoTrueba\proyectoTrueba.vcxproj"" exited with code 9009.

2. The command "npx @react-native-community/cli bundle --platform windows --entry-file "index.js" --bundle-output "C:\Users\abrah\workspace\desktop\react-native\testproject\windows\testproject\Bundle\index.windows.bundle" --assets-dest "C:\Users\abrah\workspace\desktop\react-native\proyectoPrueba\windows\proyectoPrueba\Bundle" --dev false --reset-cache --sourcemap-output "C:\Users\abrah\workspace\desktop\react-native\proyectoPrueba\windows\x64\Release\proyectoPrueba\sourcemaps\react\index.windows.bundle.packager.map" --minify false" exited with code 9009.

It should be noted that I have already done the entire requirements procedure and they are all met on my machine https://microsoft.github.io/react-native-windows/docs/rnw-dependencies

I would like to solve these problems so I can build my application and continue on my learning path. Any help received would be very helpful and I would appreciate it.

Steps To Reproduce

These steps are common for both issues (Debug and Build):

1. Create the app in React Native: npx --yes @react-native-community/cli@latest init <projectName> --version "latest"
2. Navigate into this newly created directory: cd <projectName>
3. Add React Native Windows to your project's dependencies: yarn add react-native-windows@^0.76.0
4. Running a React Native Windows App: npx react-native init-windows --overwrite

Using Visual Studio (Debug Problem)

1. From the root of the project directory, run the autolink-windows command, which will automatically link your app's dependencies: npx react-native autolink-windows
2. Open the solution file in the application folder in Visual Studio (e.g., AwesomeProject/windows/AwesomeProject.sln)
3. Select the Debug configuration and the x64 platform from the combo box controls to the left of the Run button and underneath the Team and Tools menu item.
4. Run yarn start, and wait for the React Native packager to report success.
5. Click the Debug->Start without Debugging menu item.

Using Visual Studio (Build Problem)

1. Open the solution file in the application folder in Visual Studio (e.g., AwesomeProject/windows/AwesomeProject.sln)
2. Select the Release configuration from the Configuration Manager drop-down.
3. Build the solution with Build -> Build Solution, or Ctrl+Shift+B

Expected Results

The application is run for debugging and in the other situation the executable file is built to install the app, use it, share it with my friends or publish it.

CLI version

15.0.1

Environment

System:
  OS: Windows 11 10.0.22631
  CPU: "(12) x64 AMD Ryzen 5 7530U with Radeon Graphics         "
  Memory: 20.68 GB / 31.35 GB
Binaries:
  Node:
    version: 22.11.0
    path: ~\AppData\Local\fnm_multishells\22152_1732746092209\node.EXE
  Yarn:
    version: 1.22.22
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 10.9.0
    path: ~\AppData\Local\fnm_multishells\22152_1732746092209\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK:
    API Levels:
      - "34"
      - "35"
    Build Tools:
      - 30.0.3
      - 35.0.0
    System Images:
      - android-34 | Google Play Intel x86_64 Atom
      - android-35 | Google Play Intel x86_64 Atom
    Android NDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.22621.0
IDEs:
  Android Studio: AI-241.18034.62.2411.12071903
  Visual Studio:
    - 17.12.35514.174 (Visual Studio Community 2022)
Languages:
  Java:
    version: 17.0.12
    path: C:\Program Files\Microsoft\jdk-17.0.12.7-hotspot\bin\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.3
    wanted: 0.76.3
  react-native-windows:
    installed: 0.76.2
    wanted: 0.76.2
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Community Modules

I'm using minimal dependencies as this is a test project from scratch:

"dependencies": {
    "react": "18.3.1",
    "react-native": "0.76.3",
    "react-native-windows": "0.76.2"
  }

Target Platform Version

None

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2022

Build Configuration

Release

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

Debug Problem output

Release or Build Problem output

[chrisglein]

Interesting. Does this build and run fine from the command line?

Can you try this command in the folder?

npx --yes @react-native-community/cli autolink-windows --sln "windows\proyectoTrueba.sln" --proj "windows\proyectoTrueba\proyectoTrueba.vcxproj"

(this is the same command as above but without --check)

If there were changes made that require new autolinking made while you were in Visual Studio, that may have drifted. And then the "check" command fails because something isn't linked that needs to be.

Try that and let us know?

[abrahamgalue]

Interesting. Does this build and run fine from the command line?

Can you try this command in the folder?

npx --yes @react-native-community/cli autolink-windows --sln "windows\proyectoTrueba.sln" --proj "windows\proyectoTrueba\proyectoTrueba.vcxproj"

(this is the same command as above but without --check)

If there were changes made that require new autolinking made while you were in Visual Studio, that may have drifted. And then the "check" command fails because something isn't linked that needs to be.

Try that and let us know?

Sorry but I'm new and I didn't understand the autolinking part, of course I can run that command and show you the output

Here is the output of the previous command, it should be noted that I have never configured Visual Studio or any of the tools that the official React Native for Windows documentation recommends to have to meet the requirements, with this in mind I do not know if I need to configure anything more than what is documented there, although I followed the step by step of each thing and I doubt that a pre-existing configuration is causing these errors since it is my first time using the tools.

Thank you very much for your attention, I hope not to bother and to be able to solve the problem and acquire new knowledge for both parties.

[chrisglein]

@danielayala94 this error is surfacing as a problem in the telemetry exception tracking. Autolinking error is happening regardless, but it shouldn't create this additional telemetry error.

@abrahamgalue you can try with --no-telemetry to the autolink command? We might have an error on the telemetry side that you can potentially workaround while we fix it.
@abrahamgalue For the error above that says "no such file or directory", do you see that path in your file system? Does that vcxproj open?

If this isn't panning out it could help if you can share a repro repo so we can dig into more of your settings.

[abrahamgalue]

@chrisglein I noticed that the path passed by the command in the terminal was not correct and when correcting it I got a success message, the path of the command you asked me to run was windows\proyectoTrueba.sln and the path I have locally is windows\proyectoPrueba.sln, and this was the result:

However, I think I had already run this command to run the React Native project following the official documentation

@chrisglein And yes, I can see and open the file \proyectoPrueba.vcxproj this is a preview of the file:

@chrisglein Sure! Here is the URL of the repository that I just uploaded to GitHub https://github.com/abrahamgalue/react-native-proyectoPrueba. I will be attentive to your next instructions and thank you very much in advance for your time!

[danielayala94]

@chrisglein the telemetry error is indeed a bug, and the PR to fix it is here: #14191

Many thanks to @abrahamgalue for sharing his repo and repro steps, it made easier to spot the telemetry problem. Gracias! 😊