Discussion :

[Dev222]

Salut à tous

Je débute encore dans le monde de Node, et je développe une appli (compilée via webpack + babel avant d'être exécutée coté serveur) dans laquelle je déclare des modèles Sequelize grâce à des classes Typescript ( de cette façon: https://sequelize.org/master/manual/typescript.html )

Prenons par exemple ma classe Event:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Model } from 'sequelize';
 
import { Utilisateur, Contenu, Publicite } from '@/serveur/modeles';
 
export default class Event extends Model {
 
    public id!: number;
    public date!: Date;
    public type!: number;
    public utilisateur_id!: number;
    public utilisateur?: Utilisateur;
    public ip!: string;
    public contenu_id!: number;
    public contenu?: Contenu;
    public publicite_id!: number;
    public publicite?: Publicite;
    public hash?: string;
 
    public static types = {
        vue: 1,
        clic: 2
    }
}

Le soucis, c'est que pour déclarer mes modèles sequelize en utilisant les propriétés de classe typescript, je dois désactiver plugin-proposal-class-properties. Autrement, le plugin entre en conflit avec les propriétés de classe Typescript ( https://github.com/sequelize/sequeli...ment-486030911 ) et mes modèles sequelize deviennent inutilisables (après instanciation, les propriétés sont à undefined).

Vu que je dois rester à l'écart de plugin-proposal-class-properties, j'ai décidé de migrer vers Node 12 afin de continuer à profiter des propriétés de classe.
La mise à jour est faite, je met à jour le numéro de version dans mon package.json et ma config webpack, et je vire plugin-proposal-class-properties.

Ma config webpack ressemble à ça: https://gist.github.com/Gaetan-LeGac...2565153969f102

Avant de relancer la compilation, j'essaie d'instancier mes modèles sequelize depuis Node 12 sans compilation, et ça fonctionne parfaitement.

A ce moment, je me dis que le soucis est réglé, que webpack va remarquer que ma nouvelle version de Node supporte les propriétés de classe et que tout va se compiler sans erreur.

Et bah non ! Une fois compilés, certains fichiers semblent contenir du charabia pour webpack

ERROR in ./src/serveur/modeles/publicite/Event/index.ts 3:15
Module parse failed: Unexpected token (3:15)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import { Model } from 'sequelize';
| export default class Event extends Model {
> static types = {
| vue: 1,
| clic: 2
@ ./src/serveur/modeles/factory.ts 30:0-117 74:35-40
@ ../framework/serveur/libs/boot/modeles.ts
@ ../framework/serveur/index.ts
@ multi ../framework/serveur/index.ts

Et bien sûr, j'en ai d'autres du même style

ERROR in ./src/client/public/conteneurs/user/activate.tsx 13:8
Module parse failed: Unexpected token (13:8)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
| class Landing extends React.Component {
> state = {
| chargement: false,
| erreur: '',
@ ./src/client/public/pages/user/activate.tsx 5:0-64 18:23-31
@ ./src/commun/cache/routes.js
@ ../framework/commun/router.tsx
@ ../framework/serveur/index.ts
@ multi ../framework/serveur/index.ts

ERROR in ./src/client/public/composants/compteur.tsx 9:8
Module parse failed: Unexpected token (9:8)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
| class Compteur extends React.Component {
> state = {
| pc: 0,
| txt: '--:--'
@ ./src/client/public/conteneurs/earn/trading/index.tsx 12:0-59 187:27-35 347:33-41
@ ./src/client/public/pages/earn/trading/index.tsx
@ ./src/commun/cache/routes.js
@ ../framework/commun/router.tsx
@ ../framework/serveur/index.ts
@ multi ../framework/serveur/index.ts

Ce qui a retenu mon attention, c'est cette ligne:

You may need an additional loader to handle the result of these loaders.

Sauf erreur d'interprétation de ma part, ces erreurs m'indiquent qu'une fois qu'il est passé par tous les loaders, le javascript compilé n'est pas censé contenir des déclarations de propriétés de classe, et que si c'est le cas, c'est que le code compilé ne correspond pas à la "version" de javascript attendue en sortie, ce qui fait râler Webpack.

Pourtant, le target node 12 semble bien pris en compte par preset-env:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
[11:58:16] Compiling 'server'...
@babel/preset-env: `DEBUG` option
 
Using targets:
{
  "node": "12"
}
 
Using modules transform: false
 
Using plugins:
  syntax-async-generators { "node":"12" }
  syntax-object-rest-spread { "node":"12" }
  syntax-json-strings { "node":"12" }
  syntax-optional-catch-binding { "node":"12" }
 
Using polyfills: No polyfills were added, since the `useBuiltIns` option was not set.

Le javascript en sortie est donc censé correspondre à ce que Node 12 est capable d'interpréter (c'est-à-dire l'esnext stage 3 qui comprend les propriétés de classe), non ?

Et la version de node installée sur ma machine est bien la 12:

Code :

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

1
2
3
 
gaetan@gaetan-PC:~$ node -v
v12.8.0

Ai-je oublié quelque chose pour que Webpack comprenne bien que les propriétés de classe sont supportées par la version de Node actuellement installée ?
Ou est-ce que je me trompe complètement, et que le code en sortie doit absolument être du Javascript et non du Node avec ses spécifités comme les propriétés de classe ?
Peut-être que les loaders / plugins ne sont pas dans le bon ordre ?

Merci d'avance à tous ceux qui me donneront des pistes !

[Dev222]

Après plusieurs heures à m'arracher les cheveux et à fouiner sur Github, j'ai enfin trouvé une solution à mon problème (J'ai vraiment cru que j'allais y passer plusieurs journées !)
Au lieu d'intégrer typescript à babel via le preset, j'ai ajouté ts-loader juste avant babel-loader. C'était donc une histoire d'ordre de compilation.
Tout se compile comme avant

[Dev222]

Petite mise à jour: après avoir bien expérimenté avec la pseudo-solution, j'ai constaté que l'utilisation de ts-loader + babel-loader était bien plus lente (quasiment 2x plus long) que l'ancienne solution qui embarquait typescript directement dans Babel via @preset/typescript (logique, tous les fichiers sont chargés et interprétés 2 fois ...).
En fouinant davantage sur github, j'ai appris que le preset n'est rien d'autre qu'un conteneur pour @babel/babel-plugin-transform-typescript (https://github.com/babel/babel/blob/...t/src/index.js), et que si ce dernier était executé avant @babel/plugin-proposal-class-properties, le conflit n'était plus d'actualité (https://github.com/babel/babel/issue...nt-443820095);
Effectivement j'ai testé et c'est vrai.
J'espère que mon topic en aidera d'autres !