Webpack ne peut pas compiler ts 3.7 (chaînage en option, coalescence nulle)

21

J'essaie d'utiliser des typescript 3.7fonctionnalités comme le chaînage facultatif, la coalescence nulle. Mais webpackme donne une erreur lors du transpaling.

app: Module parse failed: Unexpected token (50:40)
app: File was processed with these loaders:
app:  * ../../../node_modules/ts-loader/index.js
app: You may need an additional loader to handle the result of these loaders.
app: | export const Layout = (props) => {
app: |     const regionsResults = useQuery(regionsQuery, { fetchPolicy: 'cache-first' });
app: >     const regions = regionsResults.data?.regions ?? [];
app: |     const userItem = useQuery(usersProfileQuery, { fetchPolicy: 'cache-first' });
app: |     const handleOnClick = (selected) => props.history.push(selected.key);
``
Edgaras Karka
la source
pouvez-vous publier votre packages.jsondossier?
Carlos Crespo

Réponses:

30

J'ai changé la cible: esnextà es2018en tsconfig.jsonfichier. Maintenant ça marche.

Edgaras Karka
la source
6
Cela n'a pas fonctionné pour moi. Webpack échoue toujours avec la même erreur.
Alejandro Corredor
Ne fonctionne pas si vous utilisez, "foo".matchAll(/o+/g)car il s'agit d'une fonctionnalité ES2020.
Jason Schilling
C'est ridicule, mais ça marche vraiment! Je n'arrive même pas à comprendre comment ... Le changement optionnel ne nous a été apporté que depuis ES2020. ES2018 et ES2019 fonctionnent tous les deux correctement, entre autres ES2020 plante toujours.
Max Travis
1

Selon le chargeur que vous utilisez pour transcrire le code, plusieurs options sont disponibles

Pour ts-loader, vous devez vous assurer que la sortie de typescript est compréhensible par Webpack. Pour ce faire, définissez targetsur ES2018in tsconfig.json.

Pour babel-loader, vous devrez vous assurer que babel charge le

  • @babel/plugin-proposal-nullish-coalescing-operator

brancher. Notez que si vous utilisez preset-env, il peut ou non charger ce plugin en fonction de votre targetsou browserlist(c'est-à-dire, ne sera pas chargé si l'env cible prend en charge ces fonctionnalités de langage), auquel cas le seul moyen de garantir son inclusion est en le spécifiant manuellement dans le pluginstableau dans babel.config.js,

  plugins: [
    '@babel/plugin-proposal-nullish-coalescing-operator',
  ],
aryzing
la source