react / react/react-native

Reporting a bug for React Native DevTools

Offen
#57,436 7 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Debugging Needs: Attention Needs: Repro Needs: Version Info
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

Description

Bug Report: React Native DevTools shows a blank white/black screen after installing npm packages

React Native Version

0.86.0

Description

I created a new React Native project.

If I run the project immediately after creating it, React Native DevTools opens and works correctly.

However, after installing any npm package (even before using or importing it), React Native DevTools opens as a completely blank white/black screen.

The application itself may still run, but the DevTools UI becomes unusable.

Steps to Reproduce

  1. Create a new React Native project.
  2. Run the project.
  3. Open React Native DevTools (works correctly).
  4. Install an npm package, for example:
npm install <any-package>
  1. Restart Metro and run the application again.
  2. Open React Native DevTools.

Expected Behavior

React Native DevTools should open normally after installing additional npm packages.

Actual Behavior

React Native DevTools opens but displays only a blank white or black window.

Environment

  • OS: Windows 11
  • Node.js: (fill in)
  • npm: (fill in)
  • React Native: 0.86.0
  • Android Emulator: (fill in)
  • Hermes: Enabled
  • New Architecture: Enabled (default)

Additional Information

  • This happens consistently after installing npm packages.
  • The issue occurs even if the package is not imported into the project.
  • Restarting Metro does not resolve the problem.

Reproduction Repository

(Attach a minimal reproduction repository if possible.)

Steps to reproduce

Reporting a bug for React Native DevTools

React Native Version

0.86

Output of npx @react-native-community/cli info
# Bug Report: React Native DevTools shows a blank white/black screen after installing npm packages

## React Native Version


0.86.0


## Description

I created a new React Native project.

If I run the project immediately after creating it, React Native DevTools opens and works correctly.

However, after installing any npm package (even before using or importing it), React Native DevTools opens as a completely blank white/black screen.

The application itself may still run, but the DevTools UI becomes unusable.

## Steps to Reproduce

1. Create a new React Native project.
2. Run the project.
3. Open React Native DevTools (works correctly).
4. Install an npm package, for example:


npm install <any-package>


5. Restart Metro and run the application again.
6. Open React Native DevTools.

## Expected Behavior

React Native DevTools should open normally after installing additional npm packages.

## Actual Behavior

React Native DevTools opens but displays only a blank white or black window.

## Environment

* OS: Windows 11
* Node.js: (fill in)
* npm: (fill in)
* React Native: 0.86.0
* Android Emulator: (fill in)
* Hermes: Enabled
* New Architecture: Enabled (default)

## Additional Information

* This happens consistently after installing npm packages.
* The issue occurs even if the package is not imported into the project.
* Restarting Metro does not resolve the problem.

## Reproduction Repository

(Attach a minimal reproduction repository if possible.)
Screenshots and Videos

Bug Report: React Native DevTools shows a blank white/black screen after installing npm packages

React Native Version

0.86.0

Description

I created a new React Native project.

If I run the project immediately after creating it, React Native DevTools opens and works correctly.

However, after installing any npm package (even before using or importing it), React Native DevTools opens as a completely blank white/black screen.

The application itself may still run, but the DevTools UI becomes unusable.

Steps to Reproduce

  1. Create a new React Native project.
  2. Run the project.
  3. Open React Native DevTools (works correctly).
  4. Install an npm package, for example:
npm install <any-package>
  1. Restart Metro and run the application again.
  2. Open React Native DevTools.

Expected Behavior

React Native DevTools should open normally after installing additional npm packages.

Actual Behavior

React Native DevTools opens but displays only a blank white or black window.

Environment

  • OS: Windows 11
  • Node.js: (fill in)
  • npm: (fill in)
  • React Native: 0.86.0
  • Android Emulator: (fill in)
  • Hermes: Enabled
  • New Architecture: Enabled (default)

Additional Information

  • This happens consistently after installing npm packages.
  • The issue occurs even if the package is not imported into the project.
  • Restarting Metro does not resolve the problem.

Reproduction Repository

(Attach a minimal reproduction repository if possible.)

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

In dem Bericht ist keine Quelldatei, kein Test und kein Einstiegspunkt angegeben. Erstelle zunächst unter Windows 11 ein neues React-Native-0.86.0-Projekt, installiere ein npm-Paket, starte Metro neu und öffne React Native DevTools, um den leeren Bildschirm zu bestätigen. Als erledigt gilt die Aufgabe, wenn sich die DevTools-UI nach der Installation eines Pakets normal öffnet und vollständige Angaben zu Node.js, npm, dem Emulator und der Reproduktion aufgezeichnet sind.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react-native
Bereich
devtools, mobile-dev
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Ruhig
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.