O Webpack não pode compilar ts 3.7 (encadeamento opcional, coalescência nula)

21

Eu tento usar typescript 3.7recursos como encadeamento opcional, coalescência nula. Mas webpackdá-me um erro ao 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);
``
typescript webpack ts-loader Edgaras Karka
fonte
você pode postar seu packages.jsonarquivo?
Carlos Crespo

Respostas:

30

Mudei target: esnextpara es2018em tsconfig.jsonarquivo. Agora funciona.

Edgaras Karka
fonte
6
Isto não funcionou para mim. O Webpack ainda falha com o mesmo erro.
Alejandro Corredor
Não funciona se você estiver usando, "foo".matchAll(/o+/g)pois é um recurso do ES2020.
Jason Schilling
Isso é ridículo, mas realmente funciona! Eu ainda não consigo descobrir como ... Channing opcional nos trouxe apenas desde ES2020. ES2018 e ES2019 estão funcionando corretamente, mas o ES2020 ainda está travando.
Max Travis
1

Dependendo do carregador que você está usando para transiple o código, há várias opções disponíveis

Para ts-loader, você precisa garantir que a saída do texto datilografado seja compreensível pelo Webpack. Isto pode ser conseguido através da criação targetde ES2018no tsconfig.json.

Para isso babel-loader, é necessário garantir que o babel carregue o

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

plugar. Observe que, se você estiver usando preset-env, ele pode ou não carregar esse plug-in, dependendo de você targetsou browserlist( ou seja, não será carregado se o ambiente de destino tiver suporte para esses recursos de idioma); nesse caso, a única maneira de garantir sua inclusão é especificando-o manualmente na pluginsmatriz em babel.config.js,

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