Webpack cant compile ts 3.7 (Opcjonalne łączenie, zerowanie koalescencji)

21

Staram się korzystać typescript 3.7z takich funkcji, jak Opcjonalne łączenie, Nullish Coalescing. Ale webpackpowoduje błąd podczas transpozycji.

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
źródło
czy możesz opublikować swój packages.jsonplik?
Carlos Crespo,

Odpowiedzi:

30

Zmieniłem cel: esnextna es2018w tsconfig.jsonpliku. Teraz działa.

Edgaras Karka
źródło
6
To mi nie zadziałało. Webpack nadal nie działa z tym samym błędem.
Alejandro Corredor
Nie działa, jeśli używasz, "foo".matchAll(/o+/g)ponieważ jest to funkcja ES2020.
Jason Schilling
To niedorzeczne, ale naprawdę działa! Nawet nie wiem, jak ... Opcjonalne channing przyniosło nam dopiero od ES2020. Zarówno ES2018, jak i ES2019 działają poprawnie, a mimo to ES2020 wciąż ulega awarii.
Max Travis
1

W zależności od tego, którego modułu ładującego używasz do tłumaczenia kodu, dostępnych jest kilka opcji

Dla ts-loader, trzeba upewnić się, że wyjście z maszynopisu jest zrozumiałe Webpack. Można to osiągnąć przez ustawienie targetdo ES2018w tsconfig.json.

Dla babel-loadermusisz zrobić ładunki pewien Babel z

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

podłącz. Pamiętaj, że jeśli używasz preset-env, to może ładować tę wtyczkę w zależności od twojej targetslub browserlist(tzn. Nie zostanie załadowana, jeśli docelowa env obsługuje te funkcje językowe), w takim przypadku jedynym sposobem na zagwarantowanie jej włączenia polega na ręcznym określeniu go w pluginstablicy w babel.config.js,

  plugins: [
    '@babel/plugin-proposal-nullish-coalescing-operator',
  ],
aryzowanie
źródło