react con server

[tonyven1]

Ciao a tutti. Sono arrivato al capitolo 10 del libro react-guida-pratica. Mi trovo in difficoltà nell'usare l'applicazione con le API. Sbaglio sicuramente la procedura. Comunque utilizzando visualstudio code da terminale lancio il server con npx example-todo-api e funziona. Poi aprendo un secondo terminale lancio npm start per lanciare l'applicazione e mi dà errore:

Html Webpack Plugin:
Error: Child compilation failed:
[eslint] Cannot read config file: F:\PROGRAMMAZIONE\JAVASCRIPT\nodejs\libro_apogeo\react-guida-pratica-mast er\ch10\node_modules\eslint-config-react-app\base.js
Error: Unexpected token 'export'
Referenced from: BaseConfig

• child-compiler.js:169
  [ch10]/[html-webpack-plugin]/lib/child-compiler.js:169:18

• Compiler.js:551 finalCallback
  [ch10]/[webpack]/lib/Compiler.js:551:5

• Compiler.js:577
  [ch10]/[webpack]/lib/Compiler.js:577:11

• Compiler.js:1200
  [ch10]/[webpack]/lib/Compiler.js:1200:17

• Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
  [ch10]/[tapable]/lib/Hook.js:18:14

• Compiler.js:1196
  [ch10]/[webpack]/lib/Compiler.js:1196:33

• Compilation.js:2795 finalCallback
  [ch10]/[webpack]/lib/Compilation.js:2795:11

• Compilation.js:3100
  [ch10]/[webpack]/lib/Compilation.js:3100:11

Dove sbaglio? Grazie

[lifeisfoo]

Ciao,
intanto complimenti per essere arrivato quasi alla fine del libro: spero ti sia stato utile nel comprendere React.

Purtroppo, per quanto si possa conoscere React, i tanti strumenti che girano intorno al mondo frontend sono sempre una causa costante di problemi, come in questo caso.
Dall'errore che riporti, il tuo problema sembra essere legato all'interpretazione dei moduli e quindi mi aspetto che sia dovuto a qualche configurazione diversa da quella prevista.

Ho provato a riprodurlo in locale sulla mia macchina ma l'applicazione funziona, quindi ti propongo di provare questi tre passi in sequenza:

1. Puoi provare a lanciare l'applicazione da un terminale al di fuori di VSCode?

2. Se il primo punto non funziona, prova a dare un'occhiata a questa domanda su SO dove sembrano avere un problema simile. In quel caso hanno risolto aggiungendo una versione esplicita (e aggiornata) di eslint al package.json dell'applicazione.

3. Se ancora non hai risolto, condividi qui le versioni di node e npm usando i comandi node -v e npm -v da dove lanci l'applicazione. Inoltre aggiungi qui anche l'elenco dei file contenuti della cartella ch10 (usando il comando ls -lah) e il tuo file package-lock.json.

Spero sia utile,
Alessandro

[tonyven1]

La versione è: node v16.17.0 mentre npm 8.15.0
file package-lock.json:

package-lock.json
Non riesco a riportare i file del capitolo 10.
Ho aggiunto la versione di eslint aggiornata ma il problema persiste

Il comando ls -lah non lo riconosce

[tonyven1]

react-guida-pratica-master.zip
Comunque anche io devo farti i complimenti perchè fra i vari tipi di libri che ho letto è stato veramente facile capire react. Anzi colgo l'occasione per chiederti se hai scritto qualcosa anche su javascript.

[lifeisfoo]

Sono contento che il libro ti sia stato d'aiuto nel comprendere React :)

[lifeisfoo]

Per JavaScript c'è "JavaScript la guida definitiva" di David Flanagan che ormai è arrivato alla settima edizione.
È un'ottima referenza e spiega ogni aspetto del linguaggio: ogni volta che lo sfogli impari qualcosa che prima non sapevi.
È da leggere e da tenere sempre a portata di mano in caso di dubbi.
Però non aspettarti progetti ma solo esempi, come è comune in questo genere di libri.

[tonyven1]

Ho provato con il capitolo 11 e va tutto magnificamente. Chissà forse il capitolo 10 non mi funziona perchè ho smanettato troppo!!

[lifeisfoo]

Ciao,
è molto strano che solo il capitolo 10 non funzioni: ho dato un'occhiata a quello che hai allegato ma è il codice sembra così com'era in origine.

Potresti provare a cancellare la cartella node_modules del capitolo 10 e lanciare npm install così da essere sicuro che non si tratta di qualcosa che hai modificato tu.

In ogni caso, ora che sei arrivato alla fine ti suggerisco di fare un altro piccolo sforzo e leggerti anche questo articolo su Vite e di come usarlo al posto di Create React App.
Il futuro di Create React App è ancora incerto, mentre Vite è ormai molto usato e anche molto più veloce:
vale la pena conoscerlo.

[tonyven1]

Ti ringrazio tanto. Ora funziona tutto perfettamente sia la versione con CRA sia la versione con Vite