Webpack no puede compilar ts 3.7 (encadenamiento opcional, fusión nula)

21

Intento usar typescript 3.7características como encadenamiento opcional, fusión nula. Pero webpackme da un error al transpalear.

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);
``
typescript webpack ts-loader Edgaras Karka
fuente
puedes publicar tu packages.jsonarchivo?
Carlos Crespo

Respuestas:

30

Cambié target: esnexta es2018en el tsconfig.jsonarchivo. Ahora funciona.

Edgaras Karka
fuente
66
Esto no funcionó para mí. Webpack todavía falla con el mismo error.
Alejandro Corredor
No funciona si está utilizando "foo".matchAll(/o+/g)porque es una función ES2020.
Jason Schilling
Esto es ridículo, ¡pero realmente funciona! Incluso no puedo entender cómo ... El cambio opcional nos llegó solo desde ES2020. ES2018 y ES2019 funcionan correctamente, por cierto ES2020 sigue fallando.
Max Travis
1

Según el cargador que esté utilizando para transponer el código, hay varias opciones disponibles.

Para ts-loader, debe asegurarse de que Webpack pueda entender la salida del mecanografiado. Esto puede lograrse mediante el establecimiento targetde ES2018en tsconfig.json.

Para ello babel-loader, deberá asegurarse de que Babel cargue

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

enchufar. Tenga en cuenta que si está utilizando preset-env, puede cargar o no este complemento dependiendo de su targetso browserlist(es decir, no se cargará si el entorno de destino tiene soporte para estas características de idioma), en cuyo caso la única forma de garantizar su inclusión es especificando manualmente en la pluginsmatriz en babel.config.js,

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