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! 😊

[chrisglein]

Great find here (and FYI #14191 is now merged).
@abrahamgalue are you unblocked now then? (sounds like you had a success from the update above?)

[abrahamgalue]

@chrisglein Unfortunately not, I have updated the react-native-windows dependency to version 0.76.3, and I tried again the steps to run my application and build it using Visual Studio and I still get errors, if I do it with VS the run step works using the npx react-native run-windows command, but I need it to work with Visual Studio since it is the only option that the documentation recommends to build the application for Windows.

These are the errors I get when trying to follow the same steps with which I opened the Issue:

When I try to run my application

When I try to build my application

The repository I am using is this one, thank you very much for your attention and patience. I just hope to get my application running and building it to start practicing building applications with React Native for Windows

[chrisglein]

@danielayala94 Can you make sure that #14191 is backported to 0.76? (won't fix this, but would modify the error seen)

[jonthysell]

The repository I am using is this one, thank you very much for your attention and patience. I just hope to get my application running and building it to start practicing building applications with React Native for Windows

I did the following and your app built and ran just fine:

1. Cloned with: git clone https://github.com/abrahamgalue/react-native-proyectoPrueba.git
2. Went into folder: cd react-native-proyectoPrueba
3. Downloaded packages with: yarn
4. Ran auto-linking manually with: npx --yes @react-native-community/cli autolink-windows --logging
5. Opened windows\react-native-proyectoPrueba.sln in VS 2022
6. Built with Build > Solution
7. Back in command prompt, ran metro with: yarn start
8. Back in VS, ran with Debug > Start Debugging

[abrahamgalue]

@jonthysell I followed the steps you indicated and I got the same errors:

In step 6 I got this Error:

In step 8 I got this Error:

In the rest of the steps I had no errors, I still don't understand what the problem is since I have followed the official React Native guide step by step and now these steps that you indicated and I keep finding errors. I really have no idea how to solve it. But thank you very much for your feedback

[jonthysell]

I'm running out of ideas - can you run the Visual Studio Installer (it should be on your machine) and make sure Visual Studio is up to date? Then reboot? (sometimes VS isn't done setting itself up after an install/upgrade, and it doesn't tell you, but then random parts just don't work right)

[abrahamgalue]

@jonthysell I tried to follow the instructions you gave me but I still get the same error, I feel that this is not the right place to discuss this problem since the issue was resolved from what I saw, so I want to thank you for the attention you gave me over these days. I don't know if I should close the Issue, please give me the answer since it is the first time I do this. If you have any suggestions of a place to ask it would be welcome 🙌.