Skip to content

Problem Debugging and Building React Native App Using Visual Studio #14146

@abrahamgalue

Description

@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

Image

Release or Build Problem output

Image

Metadata

Metadata

Assignees

Type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions