Problème d'installation Webpack Encore dans Symfony en mode production

Bonjour à tous,

J’ai un problème avec l’installation de webpack Encore dans mon projet, en production seulement.

C’est un projet Symfony qui présente des mix de musique. Il y a une page par genre, et sur chaque page les mix sont appelés dynamiquement, on clic sur la vignette dans un carousel et il s’affiche la pochette du mix et un lecteur audio personnalisé. Les transitions entre les pages et entre les mix sont gérés par Swup de la suite UX. Ce projet inclut donc Webpack Encore. Il a été initialement conçu en PHP 7.4.26. Une fois déployé, les scripts Encore ne fonctionnaient pas (dev server, dev, watch, build), en revanche le site fonctionnait normalement.

Pour résoudre ce problème de scripts qui semblait lié à Encore, j’ai passé le projet de PHP 7.4.26 à PHP 8.1.0 de manière à utiliser la dernière version de Encore. A présent tout fonctionne bien en développement, mais plus en production. Ma procèdure de déploiement n’a pas changé :

1/ Préparation du code en local : ./node_modules/.bin/encore production 2/ Création de l’environnement virtuel NodeJs dans le serveur de prod (CPanel) 3/ Transfert des fichiers du projet vers le serveur (sauf les .env, le vendor, le var et le node_modules) 4/ Dans l’appli, à la racine, en SSH : composer install pour les dépendances PHP, composer require symfony/webpack-encore-bundle pour le webpack 5/ Toujours dans l’appli mais dans l’environnement virtuel NodeJs (pour accès aux controles NPM) : npm install 6/ Puis npm run build . Là j’ai la même erreur qu’avant.

La différence avec avant (en 7.4.26) c’est que maintenant le site ne fonctionne plus. Au moment d’aborder les pages gérées par Swup, j’ai une vilaine erreur 500 : Unknown "stimulus_controller" function.

Je fais bien l’installation du webpack à la racine de mon projet, là ou se trouve le package.json. Le voici : `text/x-generic package.json ( ASCII text, with CRLF line terminators )

{ "devDependencies": { "@babel/core": "^{7.17.0", "@babel/preset-env": "}7.16.0", "@hotwired/stimulus": "^{3.0.0", "@swup/debug-plugin": "}1.0", "@swup/fade-theme": "^{1.0", "@swup/forms-plugin": "}1.0", "@swup/slide-theme": "^{1.0", "@symfony/stimulus-bridge": "}3.2.0", "@symfony/ux-swup": "file:vendor/symfony/ux-swup/assets", "@symfony/webpack-encore": "^{4.0.0", "core-js": "}3.23.0", "file-loader": "^{6.0.0", "jquery": "}3.6.3", "regenerator-runtime": "^{0.13.9", "sass": "}1.57.1", "sass-loader": "^{13.0.0", "swup": "}2.0", "webpack": "^{5.74.0", "webpack-cli": "}4.10.0", "webpack-notifier": "^{1.15.0" }, "license": "UNLICENSED", "private": true, "scripts": { "dev-server": "encore dev-server", "dev": "encore dev", "watch": "encore dev —watch", "build": "encore production —progress" }, "dependencies": { "@swup/js-plugin": "}1.0.5" } }`

le webpack semble bien installé, j’ai bien le webpack.config.js, il semble configuré normalement.

La différence entre ma version en dev et ma version en prod, est que dans le "node_modules", j’ai :

• en dev une longue série de fichiers incluant .bin, .cache, @babel, @hotwire et plein d’autres;
• en prod, j’ai uniquement les dossiers commencant par @, ainsi que "path-to-regxp" et "package-lock.json".

Pas de .bin, donc la commande ./node_modules/.bin/encore production ne fonctionne pas, ni aucun script Encore.

Précédemment, l’échec de compilation finale des assets (npm run build) ne gênait pas le fonctionnement du site, mais maintenant ca ne fonctionne plus.

Je ne comprends pas pourquoi ; à l’exécution des commandes composer et npm je n’ai pas de message d’erreur à part une dépréciation ; j’installe Encore au bon endroit (racine du site, ou se trouve le pakcage.json). Mais le node_modules ne reçoit pas les éléments nécessaires au fonctionnement.

Je ne peux pas compiler et le site ne fonctionne plus.

J’ai tenté plusieurs choses : MAj de NPM et Node dans le serveur, nettoyage des cache, dépoloiement en mode dev sur le serveur de prod, rien n’y fait.

Pourquoi la version dev est elle nickel alors que dans la version prod les elements necessaires à Encore ne s’installent pas dans le node_modules, alors qu’il est bien visible dans le package.json ?

Merci pour votre attention

Salut,

Les dépendances listées dans package.json (notamment celles manquantes sur le serveur de prod) sont-elles en devDependencies ou dependencies tout court ?

Tu n’as aucune erreur lors du npm install ?

Note en passant : Généralement on préfère utiliser npm ci en production pour ne pas installer les dépendances de dev (ou on fait le build en amont, pour ne déployer que les fichiers réellement à servir aux clients).

Non, pas d’erreur lors de npm install . J’ai remplacé par npm ci, pas d’erreur non plus mais ça n’a rien changé au problème.

Voici les indications que j’ai quand j’execute des commandes : composer install : Package sensio/framework-extra-bundle is abandoned, you should avoid using it. Use Symfony instead.

webpack : Updating dependencies Lock file operations: 0 installs, 1 update, 0 removals

• Upgrading symfony/webpack-encore-bundle (v1.17.1 => v2.0.1) Writing lock file Installing dependencies from lock file (including require-dev) Package operations: 0 installs, 1 update, 0 removals
• Upgrading symfony/webpack-encore-bundle (v1.17.1 => v2.0.1): Extracting archive

et c’est tout.

Tout ce qui apparait dans le node_modules en dev (les @ + les autres) est bien listé en devDependencies. Les @ qui apparaissent dans le node_modules en prod sont donc également devDependencies.

En dependencies j’ai seulement : @swup/js-plugin

npm ci va installer exactement les dépendances listées dans package-lock.json, sans chercher d’upgrade potentielles (par exemple si tu as des versions du type ^2.3.0 qui permet d’upgrade si possible). Ça permet de maîtriser les versions installées/utilisées dans les processus automatiques.

Si tu compares npm ls --depth=0 entre ton local et la prod, tu as une différence ?

Pense à utiliser la syntaxe MarkDown pour formater tes messages et les rendre plus lisibles, notamment pour le code et les logs.

oui, une belle différence :

• en dev : @babel/core@7.20.7 ├── @babel/preset-env@7.20.2 ├── @hotwired/stimulus@3.2.1 ├── @swup/debug-plugin@1.0.3 ├── @swup/fade-theme@1.0.5 ├── @swup/forms-plugin@1.2.1 ├── @swup/js-plugin@1.0.5 ├── @swup/slide-theme@1.0.5 ├── @symfony/stimulus-bridge@3.2.1 ├── @symfony/ux-swup@1.1.0 -> .\vendor\symfony\ux-swup\assets ├── @symfony/webpack-encore@4.4.0 ├── core-js@3.27.1 ├── file-loader@6.0.0 ├── jquery@3.6.3 ├── regenerator-runtime@0.13.11 ├── sass-loader@13.0.0 ├── sass@1.57.1 ├── swup@2.0.19 ├── webpack-cli@4.10.0 ├── webpack-notifier@1.15.0 └── webpack@5.75.0

en prod : @swup/js-plugin@1.0.5

el famoso GPT m’apprend que la commande liste les paquets installés et non pas leurs dépendances, mais je ne sais pas trop quoi faire de cette info

Ce sont donc bien uniquement les dépendances de prod qui sont installées.

Tu n’aurais pas une variable d’environnement sur ton serveur qui forcerait l’installation des dépendances de prod uniquement ?

Si tu exécutes echo $NODE_ENV sur le serveur ça donne quoi ?

echo $NODE_ENV ne renvoie rien.

Problème résolu, mon site fonctionne (sauf les pages d’erreur perso, j’avais déjà le problème avant).

De fil en aiguille je suis tombé là, il est dit qu’on peut juste exécuter en local ./node_modules/.bin/encore production pour construire le dossier build, puis le transférer vers le serveur de prod, et même qu’il est préférable de faire comme ça. Ainsi, pas besoin d’installer Encore sur la prod, pas besoin de NodeJs, même pas besoin du dossier "assets", on transfère les fichiers (sauf dépendances vendor/var/node_module/assets) et puis un petit composer install, et ça roule comme ça La méthode de déploiement que j’utilisais jusque là venait de la doc de l’hébergeur, elle disait simplement de créer le build à partir des fichiers envoyés en prod.

Merci pour ton aide Viki53 ! Je crois que je vais récrire bientôt à propos du mystère des pages d’erreur … A bintôt