Discussions

Bug lancement npm start

Image

Bonjour Louis-Nicolas,

 

Je ne savais pas trop ou poser cette question.

Après avoir relancé mon serveur je n'ai plus accès à mon blog.

Ci-dessous une partie du code des deux components impliqués et l imprime ecran de mon erreur.

Il semble ne pas aimer

className={classes.[props.cl]}

pourtant avant cela fonctionnait avec cette notation. Y a t-il un rapport avec le built ?

 

import classes from './Navigation.module.css';
import NavigationItem from "./NavigationItem/NavigationItem";
//import NavItems tab
import {NavBarItems} from "./NavItems/NavBarItems";

 



function Navigation(props) {

  return (
      <ul className={classes.NavMenuItems} >
        {NavBarItems.map(item => {
          return (
            <NavigationItem key={item.id} cl={item.cName}

 

function NavigationItem(props) {     
 
  const dropDownRef = useRef(null);
  //{[classes.container, classes.navItem].join(' ')}
  const onMouseEnterHandler = () => {
    dropDownRef.current.style.display="flex";
  }
  const onMouseLeaveHandler = () => {
    dropDownRef.current.style.display="none";
  }

  return (
    <>
      <li 
        key={props.id} 
        className={classes.[props.cl]}
        onMouseEnter={props.dropDown ? () => onMouseEnterHandler() : null} 
        onMouseLeave={props.dropDown ? () => onMouseLeaveHandler() : null}
      >
        {props.dropDown ? 

 

le message d 'erreur est

 

Compiled with problems:

ERROR in ./src/Components/Header/Navigation/NavigationItem/NavigationItem.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/code/jl/React/blog_voyage/src/Components/Header/Navigation/NavigationItem/NavigationItem.js: Unexpected token (25:27)

  23 |       <li 
  24 |         key={props.id} 
> 25 |         className={classes.[props.cl]}
     |                            ^
  26 |         onMouseEnter={props.dropDown ? () => onMouseEnterHandler() : null} 
  27 |         onMouseLeave={props.dropDown ? () => onMouseLeaveHandler() : null}
  28 |       >
    at instantiate (/Users/code/jl/React/blog_voyage/node_modules/@babel/parser/lib/index.js:72:32)
    at constructor (/Users/code/jl/React/blog_voyage/node_modules/@babel/parser/lib/index.js:366:12)

 

7 réponses
Image
Louis-Nicolas Leuillet
Le 08/08/2022 à 08:56

Bonjour !

 

Apparemment il y a une erreur à la ligne 25 / 27 de ton fichier NavigationItem.js


C'est compliqué de voir ce que ça peut être sans l'éditeur ^^

Image
Jean-luc Crobeddu
Le 08/08/2022 à 13:46

Bonjour Louis-Nicolas,

 

Ce qui est étrange c'est que le site fonctionne via l'url généré par firebase (cf ci-dessous ) mais il ne fonctionne plus en local.

Comment est-ce possible :-)  ? 

 

 

Image
Jean-luc Crobeddu
Le 08/08/2022 à 13:50

je ne sais pourquoi je ne parviens plus à utiliser l'outil pour insérer une image, du coup l'url de  mon site :

https://blogvoyage-f4d0b.web.app/

Image
Louis-Nicolas Leuillet
Le 09/08/2022 à 06:34

C'est une très bonne remarque, je dois avouer que comme il s'agit de votre propre projet personnel il faudrait pouvoir fouiller dans le code pour trouver le problème.

 

Pour moi, si l'erreur que vous me présentez est celle que vous voyez encore en local, le problème est dans votre fichier de navigation.

Image
Jean-luc Crobeddu
Le 09/08/2022 à 07:25

Oui je me suis permis d'adapter ton projet en faisant des menus et sous menus déroulant :-) entre autre.
Je crois que je vais laisser tomber, je vais tout simplement suprimer le className ce qui va me décaler l'alignement de ma navigation mais tant pis :-(.
Prévois tu de rajouter un partie RWD car je me rends compte que mon site sur smartphone n'est pas du tout responsive :-(
Merci en tout cas

Image
Jean-luc Crobeddu
Le 26/08/2022 à 13:32 (modifié le 26/08/2022 à 13:41)

Je reviens juste sur ce fil de discussion car je n'aime pas baisser les bras et j'ai fait l'effort de passer un peu de temps la dessus. Bref mon site bug en local à cause de eslint, je ne sais pas si ça te parle. Apparemment il y a une incompatibilité entre la version de babel et eslint. Du coup j'ai trouvé une solution sur stackover mais ca ne marche toujours pas. J'ai essayé d'installer une autre version de babel mais je ne comprends pas comment procéder...bref tout ca pour dire qu'au final j'ai supprimer mon className à cause du probleme de parsing. Diu coup bien sûr ca fonctionne mais ma mise en forme est moche. Je sais que tu ne peux pas m'aider c'est hors cadre du cours juste si tu as des petits conseils à me donner, penses tu qu'il faille absoluement que je désinstalle et réinstalle babel ? C'est un peu dommage car avant tout fonctionnait j'imagine qu'une mise à jour à du se faire, c'est frustrant de perdre du temps dans à essayer de résoudre ce genre de problème plutôt que de coder...On se sert de plein d'outil (babel, node...) qui font des choses sans qu'on le sache mais on ne sait pas comment ils fonctionnent. Tu me diras qu'on a pas besoin de savoir pour utiliser react... :-)

Image
Louis-Nicolas Leuillet
Le 29/08/2022 à 10:33

Je parle du responsive dans le cours sur le HTML - CSS (c'est grâce au css que l'on peut faire du responsive).

Pour ton problème c'est effectivement un problème de version j'imagine, en revanche c'est compliqué de pouvoir te donner une idée de comment y remédier. Le problème a dû se faire en mettant à jour tes librairies. Ce qui m'étonne c'est surtout que c'est le className le problème alors que tu as d'autres propriétés comme celle-là dans ton projet.

Image
Inscrivez-vous ou connectez-vous pour participer à la discussion.

Informations

Créée le August 7, 2022 10:58 AM
Dernière modification le August 7, 2022 11:00 AM
Dernière activité le August 7, 2022 10:58 AM