Dépannage

Un port est déjà utilisé

ports are not available: exposing port TCP 0.0.0.0:3030 … bind: address already in use
Error: listen EADDRINUSE: address already in use :::3030

La première ligne vient de Docker, la seconde de yarn dev ou yarn start. Un autre programme écoute déjà sur 3030 : souvent un lancement précédent du site, ou le serveur de développement d'un autre projet.

1. 01

   Trouvez ce qui occupe le port

   Sous macOS ou Linux :

   TerminalCopier

   lsof -i :3030

   Sous Windows, dans PowerShell :

   TerminalCopier

   netstat -ano | findstr :3030
2. 02

   Arrêtez-le

   Fermez ce programme, ou arrêtez le lancement précédent : Ctrl+C dans son terminal, ou docker stop avec le nom ou l'identifiant du conteneur (docker ps les liste). Puis relancez le site.
3. 03

   Ou lancez le site sur un autre port

   Avec Docker, changez seulement le nombre à gauche de -p ; celui de droite est le port à l'intérieur du conteneur et reste 3030 :

   Terminaldans juicyCopier

   docker run -p 3041:3030 juicy

   Sans Docker :

   Terminaldans juicyCopier

   yarn dev -p 3041

   Pour le build de production, yarn start -p 3041.

   Résultat attendu: Le site répond sur localhost:3041Local.

Docker n'est pas lancé

failed to connect to the docker API at unix:///…/docker.sock; check if the path is correct and if the daemon is running

Les anciennes versions de Docker affichent plutôt « Cannot connect to the Docker daemon ». Dans les deux cas, le moteur Docker n'est pas démarré.

1. 01

   Ouvrez Docker Desktop

   Lancez Docker Desktop et attendez qu'il indique que le moteur est en marche. Sous Linux, démarrez le service : sudo systemctl start docker.
2. 02

   Vérifiez que Docker répond

   TerminalCopier

   docker info

   Résultat attendu: Une section Server s'affiche au lieu d'une erreur.
3. 03

   Relancez votre commande

   docker build -t juicy ., puis docker run -p 3030:3030 juicy.

Le build Docker échoue

Le premier build télécharge l'image Node.js et toutes les dépendances, puis construit le site. Il s'arrête avec "failed to solve" et l'étape qui a échoué quand quelque chose bloque.

• Pas de connexion ou délai dépassé : le build a besoin d'un accès à internet. Relancez la commande une fois en ligne ; les étapes terminées sont en cache.
• No space left on device : libérez de l'espace dans Docker Desktop, ou vérifiez ce que Docker occupe avec docker system df.
• Il échoue à `yarn build` après une modification du code : l'erreur au-dessus de cette ligne nomme le fichier. Lancez yarn typecheck sans Docker pour voir toutes les erreurs de type d'un coup.
• Il échoue toujours à la même étape : relancez le build sans le cache.

docker build --no-cache -t juicy .

Yarn indique la version 1.22

This project's package.json defines "packageManager": "yarn@4…". However the current global version of Yarn is 1.22…

Le template fige Yarn 4 via Corepack. Ce message signifie que Corepack n'est pas encore activé, c'est donc l'ancien Yarn global qui a répondu.

corepack enable

Puis relancez yarn install. Si votre Node.js n'a pas Corepack, installez-le d'abord avec npm install -g corepack.

Les canettes n'apparaissent pas

Loading models...

La page reste sur son indicateur de chargement, ou affiche le fond et le texte sans canettes. La roue n'apparaît qu'une fois la première canette et la carte d'éclairage chargées toutes les deux, donc un seul fichier en échec la garde cachée.

• Le chemin d'un modèle est faux. Le fichier .glb de chaque canette est listé dans src/features/carousel/constants/juiceCans.ts et servi depuis public/. Un fichier renommé ou déplacé répond 404.
• La carte d'éclairage manque. Il s'agit de public/assets/hdri/forest_slope_1k.hdr, nommé dans src/features/carousel/constants/environment.ts. Gardez le fichier, ou modifiez les deux ensemble.
• WebGL est désactivé. Activez l'accélération matérielle dans les paramètres du navigateur, ou essayez un autre navigateur.

Ouvrez les outils de développement du navigateur, onglet Network, et rechargez : la requête en échec indique le fichier manquant. Tout ce que charge la page est fourni dans le dossier : aucun service extérieur n'est nécessaire.

Une modification ne s'affiche pas

• Avec Docker : l'image contient une copie du site du moment où vous l'avez construite. Relancez docker build -t juicy ., puis démarrez un nouveau conteneur.
• Avec `yarn start` : relancez d'abord yarn build. Seul yarn dev prend en compte les modifications de lui-même.
• Un nouveau modèle 3D ou une nouvelle image a l'air ancien : le navigateur garde les fichiers de public/. Rechargez sans le cache (Ctrl+Shift+R, ou Cmd+Shift+R sur Mac), ou donnez un nouveau nom au nouveau fichier.

Le site ne lit aucune variable d'environnement. Si vous en ajoutez une dont le nom commence par NEXT_PUBLIC_, Next.js écrit sa valeur dans la page au moment du build, donc une nouvelle valeur demande aussi un nouveau build.

Un texte s'affiche sous forme de clé

juices.lemonGinger.name

La page affiche le nom d'un texte au lieu du texte, et la console du navigateur journalise MISSING_MESSAGE. La clé manque dans l'un des fichiers de messages, souvent après qu'une saveur a reçu un nouvel identifiant. Ajoutez-la à la fois dans messages/en.json et messages/ar.json, avec le même chemin dans chacun.

• Remplacer une saveur

Le site ne répond pas sur un service d'hébergement

yarn start écoute toujours sur le port 3030 : le script le fixe avec -p 3030, qui l'emporte sur une variable PORT. Un hébergeur qui donne à l'application son propre port dans PORT n'y trouve alors rien. Indiquez à l'hébergeur que l'application écoute sur 3030, ou utilisez ceci comme commande de démarrage :

yarn next start -p $PORT

• Mettre en ligne