JavaScript [React JS] install router-dom

[Fastel]

Hi, ich (React-Anfänger) folge grade diesem Tutorial und stecke bei diesem Video fest:

YouTube

An dieser Stelle steht ein externer Inhalt von YouTube, der den Forumbeitrag ergänzt. Er kann mit einem Klick geladen und auch wieder ausgeblendet werden.

YouTube-Embeds laden

Ich bin damit einverstanden, dass YouTube-Embeds geladen werden. Dabei können personen­bezogene Daten an YouTube übermittelt werden. Mehr dazu in der Datenschutzerklärung.

YouTube-Embeds laden

Datenschutzerklärung

Alles funktioniert fein, zur Sicherheit mach ich es wie der Coach, erstelle mit create-react-app und nehme die Dateien aus seinem Github.
danach

npm start
npx json-server --watch data/db.json --port 8000 (neues Terminal)

(App wird wie erwartet angezeigt)

Wenn ich den Befehl npm install react-router-dom@5 ausführe, gibt es aber Probleme. Ich lese raus, dass es eine neue Version (6) gibt. Aber auch dies funktioniert nicht:
ich habe die App komplett gelöscht, neu erstellt, die entsprechenden GitHub Dateien in den Ordner kopiert
-> App läuft -> install react-router-dom@6 => Fehlermeldung, Warnings, App wird nicht mehr geladen.

Ich hänge mal als Textdatei die Meldungen an. Zuerst das, was das Terminal ausgibt und -mit Sternchen getrennt- das, was direkt im Browser angezeigt wird.

ps.: nach dem router install und VSCode Neustart startet auch der local host nicht mehr. Ich muss immer die ganze App löschen und neu create-react-app en.

 

[jb_alvarado]

Wenn du eh die Files vom Repo aus Folge 21 nimmst, kannst du doch auch einfach die Abhängigkeiten mit npm i installieren, da sollte alles dabei sein was du brauchst.

 

[Fastel]

Ok Danke erst mal für die Antwort. Anfängeralarm: ich beschreibe mal was ich tu':

Ich gehe mit VS-Code in den Projektordner der mit create-react-app erstellt wurde. Ich habe die Daten aus dem Repo 21 in den Ordner eingefügt (außer den node modules- ordner, der ist im Repo nicht enthalten).
Ich öffne ein Terminal, führe npm i aus und bekomme diese Rückmeldung:

PS C:\a_react\dojo-blog> npm i
npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
npm WARN deprecated mini-create-react-context@0.4.1: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

added 9 packages, removed 14 packages, changed 3 packages, and audited 1947 packages in 46s

121 packages are looking for funding
  run `npm fund` for details

62 vulnerabilities (1 low, 13 moderate, 33 high, 15 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

danach: npm start führt zu dieser Meldung:

PS C:\a_react\dojo-blog> npm start

> dojo-blog@0.1.0 start
> react-scripts start

node:internal/modules/cjs/loader:571
      throw e;
      ^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in C:\a_react\dojo-blog\node_modules\postcss-safe-parser\node_modules\postcss\package.json
    at new NodeError (node:internal/errors:399:5)
    at exportsNotFound (node:internal/modules/esm/resolve:361:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:697:9)
    at resolveExports (node:internal/modules/cjs/loader:565:36)
    at Module._findPath (node:internal/modules/cjs/loader:634:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1061:27)
    at Module._load (node:internal/modules/cjs/loader:920:27)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (C:\a_react\dojo-blog\node_modules\postcss-safe-parser\lib\safe-parser.js:1:17) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

Node.js v18.15.0

localhost ist nicht erreichbar/startet nicht

 

[jb_alvarado]

Das Repo ist schon etwas veraltet, wird auch in den issues bemängelt. Vielleicht hilft es wenn du testhalber mal eine andere NodeJS Version nimmst. Z.B. 16, wird auch hier empfohlen. Dann am besten das Repo neu klonen und wieder npm i.

 

[Fastel]

aaaah endlich. Danke alvarado.

Für alle mit dem gleichen Problem: Ich habe einen

• node package manager installiert
• version 16.16.0 installiert
• auf 16.16.0 geswitcht

Nun geht alles wie im Tutorial und ich kann später sicher wieder auf die neue Version umschalten.

Ist schon spannend, dass man sich beim Umstieg von vanilla HTML/CSS/JS auf React noch mehr damit beschäftigen muss, wie die Hintergründe des Programmierens laufen. Da gibt es bei mir noch eine steile Lernkurve. Ich habe das System hinter Node und den Packages einfach noch nicht gut genug verstanden um zusehen wo genau die Probleme anlaufen. Erstmal geht es aber im Tutorial weiter
Bei 22 häng ich sicher wieder irgendwo fest ^^

 

[jb_alvarado]

Kompatibilität und Langzeitpflege ist leider oft ein Problem...