Discussion :

[Rakken]

Bonjour,

J'ai un problème vraiment bizarre et je ne sais plus quoi faire.
J'ai un projet en Symfony 5, et je veux utiliser du javascript. Jusque là, pas de soucis. Du coup, j'ai installé encore & compagnie, histoire de faire ça propre.

Ce que je veux, c'est avoir une classe js, d'un côté, et de l'autre, un fichier qui va utiliser cette classe.
Le soucis, c'est que ça ne fonctionne que si ma classe ne possède qu'un constructeur : à la moindre méthode que je rajoute, aussi basique soit elle, je ne vois plus rien.

Est-ce que quelqu'un aurait une idée du soucis ?

Voici quelques portion de code pour montrer le soucis :
Webpack.config

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
    .addEntry('app', './assets/js/app.js')
    .addEntry('Chien', './assets/js/Components/Chien.js') 
    .addEntry('secretaryCtrl', './assets/js/secretaryCtrl.js')

(pas certain que l'entrée "Chien" soit nécessaire).

Là, ça marche, si je décommente "aboyer", ça ne marche plus.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
class Chien {    
    constructor(nom) {
        this.nom = nom;
    }
 
   /*aboyer() {
        console.log(this.nom + " aboie");
    }/**/
}
 
export default Chien;

Code du fichier qui doit utiliser Chien.
A noter que si jamais je décommente "aboyer" de la classe chien, alors même le console.log("test") ne se voit plus, par contre, si je commente "aboyer", je vois "test" et l'objet "toutou" est une instance parfaitement valide.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
console.log("test");
 
import Chien from './Components/Chien';
let toutou = new Chien("Milou");
console.log(toutou);

Appel du fichier dans mon fichier twig.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<script src="{{ asset('build/secretaryCtrl.js')}}"></script>

Voilà... Merci d'avance si jamais quelqu'un à une idée parce que là, je n'ai plus aucune piste... ^^.

[Rakken]

Si jamais ça intéresse quelqu'un, en fait, le soucis vient du fait que Webpack utilise babel et que la conversion ES6/ES5 semble un peu foireuse.
Du coup, dans le webpack.config.js, il suffit de mettre en commentaire ceci pour que tout fonctionne bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
    // enables @babel/preset-env polyfills
    /*((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })*/

Babel ne converti plus, donc ne foire plus rien. J'imagine que c'est au prix d'une moindre compatibilité sur les anciens navigateurs et il est peut être possible de modifier cette config pour que babel soit capable de prendre en compte le fait que dans une classe, parfois, il peut arriver (si si) qu'il y ait des méthodes, mais cette version là fonctionne.