Défaut de dépendance (# npm audit report)

Défaut de dépendance (# npm audit report) - Javascript/Node.js - Programmation

Marsh Posté le 07-08-2024 à 23:06:39    

Bonjour,
 
Je suis tout nouveau dans le monde de javascript.
J’apprends sur le tas en essayant de développer une idée qui me trotte dans la tête.
 
malheureusement, en faisant des essais, j'ai installer tout un tas de dépendance qui me remontent un certain nombre de défauts
 
lorsque j'efface node_modules et Package-lok.json et que je relance "npm install" le terminal m'annonce 159 vulnerabilities (6 low, 86 moderate, 62 high, 5 critical)
 
après un "npm audit --force" je tombe à 8 vulnerabilities (2 moderate, 6 high)
 
j'ai cherché un peu, je vous avoue je sèche.
j’essaie d'avoir un code propre mais les dépendance ça me dépasse.
 
est ce que vous pourriez me donner votre avis sur mon package.json?
 

Code :
  1. {
  2.   "name": "react-card",
  3.   "private": true,
  4.   "version": "0.0.0",
  5.   "type": "module",
  6.   "scripts": {
  7.     "dev": "vite",
  8.     "build": "tsc &&vite build",
  9.     "preview": "vite preview",
  10.     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
  11.   },
  12.   "dependencies": {
  13.     "react": "^18.0.0",
  14.     "react-dom": "^18.0.0",
  15.     "react-scripts": "^5.0.1",
  16.     "react-spring": "5.3.8",
  17.     "react-swipy": "^0.0.6"
  18.   },
  19.   "devDependencies": {
  20.     "@types/react": "^18.3.3",
  21.     "@types/react-dom": "^18.3.0",
  22.     "@vitejs/plugin-react-swc": "^3.7.0",
  23.     "eslint-plugin-react-refresh": "^0.4.5",
  24.     "sass": "^1.77.8",
  25.     "vite": "^5.1.6",
  26.     "vite-plugin-pwa": "^0.20.1"
  27.   }
  28. }


 
Merci d'avance


---------------
Il y a deux choses d'infini au monde : l'univers et la bêtise humaine... mais pour l'univers j'en suis pas très sûr
Reply

Marsh Posté le 07-08-2024 à 23:06:39   

Reply

Marsh Posté le 07-08-2024 à 23:09:29    

Je pense que le rapport du terminal peut également vous intéresser
 

Code :
  1. # npm audit report
  2. nth-check  <2.0.1
  3. Severity: high
  4. Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr
  5. fix available via `npm audit fix --force`
  6. Will install react-scripts@3.0.1, which is a breaking change
  7. node_modules/svgo/node_modules/nth-check
  8.   css-select  <=3.1.0
  9.   Depends on vulnerable versions of nth-check
  10.   node_modules/svgo/node_modules/css-select
  11.     svgo  1.0.0 - 1.3.2
  12.     Depends on vulnerable versions of css-select
  13.     node_modules/svgo
  14.       @svgr/plugin-svgo  <=5.5.0
  15.       Depends on vulnerable versions of svgo
  16.       node_modules/@svgr/plugin-svgo
  17.         @svgr/webpack  4.0.0 - 5.5.0
  18.         Depends on vulnerable versions of @svgr/plugin-svgo
  19.         node_modules/@svgr/webpack
  20.           react-scripts  >=2.1.4
  21.           Depends on vulnerable versions of @svgr/webpack
  22.           Depends on vulnerable versions of resolve-url-loader
  23.           node_modules/react-scripts
  24.       Depends on vulnerable versions of svgo
  25.       node_modules/@svgr/plugin-svgo
  26.         @svgr/webpack  4.0.0 - 5.5.0
  27.         Depends on vulnerable versions of @svgr/plugin-svgo
  28.         node_modules/@svgr/webpack
  29.           react-scripts  >=2.1.4
  30.           Depends on vulnerable versions of @svgr/webpack
  31.       Depends on vulnerable versions of svgo
  32.       node_modules/@svgr/plugin-svgo
  33.         @svgr/webpack  4.0.0 - 5.5.0
  34.       Depends on vulnerable versions of svgo
  35.       Depends on vulnerable versions of svgo
  36.       node_modules/@svgr/plugin-svgo
  37.         @svgr/webpack  4.0.0 - 5.5.0
  38.         Depends on vulnerable versions of @svgr/plugin-svgo
  39.         node_modules/@svgr/webpack
  40.           react-scripts  >=2.1.4
  41.           Depends on vulnerable versions of @svgr/webpack
  42.           Depends on vulnerable versions of resolve-url-loader
  43.           node_modules/react-scripts
  44. postcss  <8.4.31
  45. Severity: moderate
  46. PostCSS line return parsing error - https://github.com/advisories/GHSA-7fh5-64p2-3v2j
  47. fix available via `npm audit fix --force`
  48. Will install react-scripts@3.0.1, which is a breaking change
  49. node_modules/resolve-url-loader/node_modules/postcss
  50.   resolve-url-loader  0.0.1-experiment-postcss || 3.0.0-alpha.1 - 4.0.0
  51.   Depends on vulnerable versions of postcss
  52.   node_modules/resolve-url-loader
  53. 8 vulnerabilities (2 moderate, 6 high)



---------------
Il y a deux choses d'infini au monde : l'univers et la bêtise humaine... mais pour l'univers j'en suis pas très sûr
Reply

Marsh Posté le 08-08-2024 à 11:12:07    

déjà d'une chose :
- Vérifier ta version de nodeJS, du react 18 c'est plutôt du node 18 voire 20 de préférence.

 

ensuite vérifier tes packages, et qu'ils soient bien à jour :

 

npm-check-updates le permet : https://www.npmjs.com/package/npm-check-updates

 

tu tapes ncu -u
pour forcer les updates et hop un npm i et on est bon.

 

Si tu fais du vites, tu n'a pas à avoir react-script dans le package.
react-scripts c'était le truc avant qu'on utilisait lorsqu'on générait un projet avec Create-react-app

 

donc vire les dépendances :
    "react-scripts": "^5.0.1",

 


un package semi nettoyé :

 
Code :
  1. {
  2.   "name": "react-card",
  3.   "private": true,
  4.   "version": "0.0.0",
  5.   "type": "module",
  6.   "scripts": {
  7.     "dev": "vite",
  8.     "build": "tsc && vite build",
  9.     "preview": "vite preview",
  10.     "lint": "eslint . --ext ts,tsx --report-unused-directives --max-warnings 0"
  11.   },
  12.   "dependencies": {
  13.     "react": "^18.2.0",
  14.     "react-dom": "^18.2.0",
  15.     "react-spring": "^9.7.3",
  16.     "react-swipy": "^0.0.6"
  17.   },
  18.   "devDependencies": {
  19.     "@types/react": "^18.2.64",
  20.     "@types/react-dom": "^18.2.21",
  21.     "@vitejs/plugin-react-swc": "^3.7.0",
  22.     "eslint-plugin-react-refresh": "^0.4.5",
  23.     "sass": "^1.71.1",
  24.     "vite": "^5.1.6",
  25.     "vite-plugin-pwa": "^0.19.2"
  26.   }
  27. }
 

n'oublie pas d'écrire des tests pour ton code, test unitaires avec vitest et tests fonctionnels avec cypress ou playwright, c'est le minimum syndical à mes yeux


Message édité par gatsu35 le 08-08-2024 à 11:14:00

---------------
Blablaté par Harko
Reply

Marsh Posté le 08-08-2024 à 23:57:21    

Merci beaucoup gatsu35!
Je regarde ça demain.
j'avais remarqué que react-Script avait tendance à poser des problème, mais j'avais cru comprendre que pour certain paquet il valait mieux parfois rester sur des anciennes versions.
dans mon cas, je glane du code sur internet et typiquement, c'est de cette façon que react-script est arrivé....
j'avais testé le code sans problème, les problèmes sont arrivés lorsque je l'ai intégré et monté en version.
 
Je vais pousser les essais.
 
concernant vitest cypress, tu me parle chinois, mais je vais regarder ça. je t'avoue écrire du code qui sers à tester le code que j'ai écris....


---------------
Il y a deux choses d'infini au monde : l'univers et la bêtise humaine... mais pour l'univers j'en suis pas très sûr
Reply

Marsh Posté le 09-08-2024 à 07:23:27    

ça a effectivement l'air beaucoup plus propre, merci beaucoup!
 
tu m'as fais baisser certaines versions dans Package.json, comme je m'y attendais les valeurs sont remontés lors de la mise à jour.
quel est le but de la manœuvre?
 
j’étais en Node.js 18, je suis passé en 20
 
voici les Package finaux.

Code :
  1. {
  2.   "name": "react-card",
  3.   "private": true,
  4.   "version": "0.0.0",
  5.   "type": "module",
  6.   "scripts": {
  7.     "dev": "vite",
  8.     "build": "tsc &&vite build",
  9.     "preview": "vite preview",
  10.     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
  11.   },
  12.   "dependencies": {
  13.     "react": "^18.3.1",
  14.     "react-dom": "^18.3.1",
  15.     "react-spring": "9.7.4",
  16.     "react-swipy": "^0.0.6"
  17.   },
  18.   "devDependencies": {
  19.     "@types/react": "^18.3.3",
  20.     "@types/react-dom": "^18.3.0",
  21.     "@vitejs/plugin-react-swc": "^3.7.0",
  22.     "eslint-plugin-react-refresh": "^0.4.9",
  23.     "sass": "^1.77.8",
  24.     "vite": "^5.4.0",
  25.     "vite-plugin-pwa": "^0.20.1"
  26.   }
  27. }


 
Je suis passé à zéro défaut

Message cité 1 fois
Message édité par valerypetit le 09-08-2024 à 07:24:22

---------------
Il y a deux choses d'infini au monde : l'univers et la bêtise humaine... mais pour l'univers j'en suis pas très sûr
Reply

Marsh Posté le 09-08-2024 à 11:39:15    

valerypetit a écrit :

ça a effectivement l'air beaucoup plus propre, merci beaucoup!

 

tu m'as fais baisser certaines versions dans Package.json, comme je m'y attendais les valeurs sont remontés lors de la mise à jour.
quel est le but de la manœuvre?

 


[/cpp]

 

Je suis passé à zéro défaut

 

Erreur de ma part désolé

 

personnellement as-tu lancé un coup de npm-check-updates ?
tu mettras tout.à jour ainsi

 

Edit : concernant le fait d'écrire du code pour tester du code, c'est complètement normal.

 

Quand tu écris du code, c'est quand même plaisant d'avoir un bout de code qui lances ta fonction et qui vérifie à ta place si elle retourne ce que tu lui as demandé.

 

L'avantage :
- tu peux tester tous les différents use-cases d'un coup et rapidement
- tu peux éviter des régressions dans le code en relancant tes tests.

 

Vitest c'est très utilie pour du test unitaire (tester des fonctions, des classes)
Et Cypress c'est plus utilisé pour tester dans un navigateur des parcours utilisateur.


Message édité par gatsu35 le 09-08-2024 à 11:41:28

---------------
Blablaté par Harko
Reply

Marsh Posté le 09-08-2024 à 14:19:57    

Oui c'est bon, j'ai fais ncu -u, les valeurs dans package.json ont étés remplacées.
 
merci pour les conseil pour tester l'app.
je vais regarder ça.


---------------
Il y a deux choses d'infini au monde : l'univers et la bêtise humaine... mais pour l'univers j'en suis pas très sûr
Reply

Marsh Posté le 09-08-2024 à 21:54:44    

valerypetit a écrit :

Oui c'est bon, j'ai fais ncu -u, les valeurs dans package.json ont étés remplacées.
 
merci pour les conseil pour tester l'app.
je vais regarder ça.


Et sinon si tu veux aller très vite, tu te prends un abonnement chez claude.ai (c'est comme chatgpt mais je trouve mieux) et tu lui poses tes questions
tu verras, c'est efficace de fou


---------------
Blablaté par Harko
Reply

Marsh Posté le 12-08-2024 à 14:07:44    

Ha merci,
Je fais ça sur chat GPT et il y a souvent des erreurs.
Je vais regarder


---------------
Il y a deux choses d'infini au monde : l'univers et la bêtise humaine... mais pour l'univers j'en suis pas très sûr
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed