Bug lancement npm start
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
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)
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 ^^
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 :-) ?
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/
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.
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
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... :-)
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.