Tutorials

Tutorial: Fehler bei „npx create-react-app“ in Visual Studio Code gelöst (3 Lösungswege)

Melden

Wenn du versuchst, ein neues React-Projekt im Terminal von Visual Studio Code (VS Code) mit dem Befehl npx create-react-app mein-app-name zu erstellen, kann es häufig zu Fehlern kommen. Typische Probleme sind hängende Installationen, Berechtigungsfehler oder Fehlermeldungen wie „A template was not provided“ oder „running scripts is disabled on this system“.

In diesem Tutorial zeigen wir dir 3 bewährte Lösungswege, um diesen Fehler zu beheben und dein React-Projekt erfolgreich zu starten.

Weg 1: Den npx-Cache leeren und veraltete globale Pakete deinstallieren

Sehr oft liegt das Problem darin, dass create-react-app früher einmal global auf deinem Computer installiert wurde oder eine fehlerhafte Version im npx-Cache liegt. React empfiehlt, das Paket niemals global zu installieren.

Schritt-für-Schritt-Anleitung:

  1. Öffne das Terminal in Visual Studio Code (Strg + ö oder über das Menü: Terminal > Neues Terminal).
  2. Deinstalliere eventuelle globale Versionen mit folgendem Befehl:
    npm uninstall -g create-react-app
  3. Bereinige den npm-Cache:
    npm cache clean --force
  4. Führe den Befehl erneut aus, erzwinge dabei aber den Download der allerneuesten Version:
    npx create-react-app@latest mein-projekt

Weg 2: PowerShell-Sicherheitsrichtlinien (Execution Policy) in VS Code anpassen

Auf Windows-Systemen nutzt VS Code standardmäßig die PowerShell. Häufig bricht npx mit einer Fehlermeldung ab, die besagt, dass das Ausführen von Skripten auf dem System deaktiviert ist („File cannot be loaded because running scripts is disabled...“).

Hier gibt es zwei Möglichkeiten zur Lösung:

Option A: Ausführungsrichtlinie ändern (Einmalig)

  1. Schließe VS Code.
  2. Suche im Windows-Startmenü nach PowerShell, mache einen Rechtsklick darauf und wähle „Als Administrator ausführen“.
  3. Gib folgenden Befehl ein und bestätige mit der Eingabetaste:
    Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
  4. Bestätige die Nachfrage mit J (für Ja) oder A (für Alle).
  5. Öffne VS Code erneut und erstelle dein Projekt mit npx create-react-app mein-projekt.

Option B: Terminal-Profil in VS Code auf die Eingabeaufforderung (CMD) umstellen

Wenn du Richtlinien nicht ändern möchtest, wechsle einfach das Terminal:

  1. Drücke im VS Code Terminal oben rechts auf das kleine Pfeil-Symbol neben dem Plus-Zeichen (+).
  2. Wähle Command Prompt (Eingabeaufforderung) oder Git Bash anstelle von PowerShell aus.
  3. Führe den npx create-react-app-Befehl dort aus.

Weg 3: Der moderne und stabilere Weg über Vite (Empfohlene Alternative)

Das Tool create-react-app wird vom React-Team kaum noch aktiv gepflegt und verursacht deshalb vermehrt Abhängigkeitskonflikte. Die offizielle und modernere Methode, ein React-Projekt aufzusetzen, ist der Einsatz von Build-Tools wie Vite. Es ist drastisch schneller und vermeidet die typischen npx-Fehler vollständig.

So erstellst du dein React-Projekt mit Vite in VS Code:

  1. Gib im VS Code Terminal folgenden Befehl ein:
    npm create vite@latest mein-projekt -- --template react
  2. Navigiere in deinen neu erstellten Projektordner:
    cd mein-projekt
  3. Installiere die benötigten Pakete:
    npm install
  4. Starte den lokalen Entwicklungsserver:
    npm run dev

Nach wenigen Millisekunden erhältst du einen lokalen Link (z. B. http://localhost:5173), den du im Browser öffnen kannst.

Zusammenfassung

  • Wenn du weiterhin create-react-app nutzen möchtest: Wähle Weg 1 (Cache bereinigen) oder Weg 2 (Windows-PowerShell-Rechte anpassen).
  • Wenn du eine zukunftssichere, schnellere und fehlerfreie Lösung suchst: Wähle Weg 3 (Vite).
0