Webpack is having trouble compiling TypeScript 3.7 due to the inclusion of features such as Optional Chaining and Nullish Coales

Trying to utilize the latest features of TypeScript 3.7 such as Optional Chaining and Nullish Coalescing is causing an error in webpack during transpilation.

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);
``
typescriptwebpackts-loader

Answer №1

After updating the target setting from esnext to es2018 in the tsconfig.json file, everything is now functioning properly.

If you're facing a similar issue with webpack, you can check out this reference: https://github.com/webpack/webpack/issues/10227

Answer №2

When using a transpiler to convert code, the options available vary depending on the loader being used.

If you are using ts-loader, it is important to ensure that the output from typescript can be understood by Webpack. This can be done by setting the target to ES2018 in the tsconfig.json.

For babel-loader, make sure that babel includes the following plugins:

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

It's worth noting that when using preset-env, these plugins may not be loaded based on your specified targets or browserlist. To ensure their inclusion, manually add them to the plugins array in your babel.config.js:

  plugins: [
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-optional-chaining',
  ],

Answer №3

Dealing with a similar issue in an outdated Vue.js 2 web application, I had to take the following steps:

npm install --save-dev @babel/plugin-transform-nullish-coalescing-operator
npm install --save-dev @babel/plugin-transform-optional-chaining

Additionally, I made changes to my babel.config.js:

module.exports = {
    presets: ["@vue/app"],
    plugins: ["@babel/plugin-transform-nullish-coalescing-operator", "@babel/plugin-transform-optional-chaining"],
};

You can refer to the following resources for more information:

Answer №4

In case you're working with VS Code, it might be a good idea to update the local TypeScript version that VS Code is utilizing.

Wondering about the TypeScript version Visual Studio Code is using? Learn how to update it here!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can I take to enhance the quality of my PDF files? Currently, I am utilizing Jspdf in conjunction with html

My current challenge involves generating a PDF file from my application. Although I am able to create a PDF, the quality is not up to par. When I download the PDF, I notice some discrepancies in text quality. While it's not terrible, it's also n ...

reactjstypescriptnext.jsjspdfhtml2canvas

Angular is showing an error stating that the type 'EventEmitter' is not generic

As I follow along with a tutorial, I've come across the use of EventEmitter. The code snippet provided in the tutorial is as follows: @Output() ratingClicked: EventEmitter<string> = new EventEmitter<string>(); However, my Visual ...

angulartypescript

Tips on transforming a JavaScript function constructor into TypeScript

Transitioning from JavaScript to TypeScript has presented me with some challenges. One of the tasks I need to accomplish is converting a constructor function into its TypeScript equivalent. The original JavaScript function looks like this: export default ...

javascriptreactjstypescript

The Typescript interface requires that one prop representing a number is expected to be less than another number prop

Is there a way to create a TypeScript interface that enforces a condition where a number property must always be less than another number property in the interface? For instance, if I have a numberOfFiles property and a currentFileIndex property, and I wa ...

typescripttypesinterfacenumbers

Transforming a JSON object into XML format

Currently, I am encountering an issue while attempting to convert my JSON object to XML using the xml-js library's json2xml function. When trying to implement this functionality, I keep getting an error message that states: Error: Buffer is not defin ...

jsonxmlangulartypescript

Currently, I am attempting to implement password strength validation using Angular

Looking for a way to implement password strength validation in Angular? You may encounter an error message like this: NullInjectorError: No provider for password strength! in the passwordstrength.ts file HTML <div class="validation_errors t ...

htmlangulartypescriptangular-reactive-forms

What is the recommended way to define a recursive TypeScript object that consists of keys that are exclusively strings?

I am seeking to define a type for an arbitrary object with only string keys (excluding symbol) at each level of nesting. Here is what I envision (though the example provided does not work and is not valid): type RecursiveRecord = { [key: string]: ...

typescript

Creating a seamless integration between Angular 2's auth guard and observables to enhance application security

I'm having trouble setting up an auth guard for one of my routes because I am unsure how to implement it with an observable. I am using ngrx/store to store my token. In the guard, I retrieve it using this.store.select('auth'), which returns ...

angulartypescriptobservableangular2-guards

Issue with the display of JQuery slider within TypeScript Angular directive in C# environment

I am encountering an issue with implementing a JQuery slider in my application. When I use it solely with JQuery, it functions properly. However, when I incorporate it into an angular directive built with typescript, the display is not as expected. https: ...

c#jqueryangularjstypescriptslider

Unable to alter the input data within the LCJS chart

I have been utilizing LightningChart JS to create scrolling line charts. After following an official tutorial by the developers on YouTube, I was able to successfully implement the automatic generated data. Now, I am looking to modify the input to a JSON f ...

javascripttypescriptlightningchart

Is there a way to instruct npm to compile a module during installation using the dependencies of the parent project?

I am curious about how npm modules are built during installation. Let me give you an example: When I check the material-ui npm module sources on GitHub, I see the source files but no built files. However, when I look at my project's node_modules/mate ...

javascriptnode.jsnpmwebpackmaterial-ui

Can you explain the purpose of the curly braces found in a function's parameter definition?

I am currently working on an Angular 5 project and came across this intriguing Typescript code snippet. (method) CreateFlightComponent.handleSave({ currentValue, stepIndex }: { currentValue: Partial<Flight>; stepIndex: number; }): void Can ...

typescriptdestructuring

Ways to prevent Deno Workers from using cached source code

Good day, I am currently working on building a custom javascript code execution platform using Deno Workers. Additionally, I have implemented an Oak web server to manage requests for script modifications and their compilation and execution. An issue arise ...

javascripttypescriptworkerdeno

Unsubscribing from a nested observable - a step-by-step

In our Angular component, we leverage the ngOnDestroy() method to handle canceling http requests that are still pending when navigating away from a page. To avoid reloading data that has already been fetched, we utilize a custom generic cache helper on cer ...

angulartypescriptrxjsobservable

Learn how to dynamically pass a click event from a div to a checkbox with delegation

I need assistance with a scenario where clicking on a button within a component triggers another click event on a specific checkbox located in a different div within the same component. Essentially, I want to programmatically simulate a click on the checkb ...

angulartypescriptform-control

What is the reason for TypeScript's refusal to accept this task?

In my attempt to create a type that can be A, B, or an object with a key containing an array of 2 or more items that are either A, B, or another similar object (thus allowing for recursive definition). This is the solution I came up with: type A = { p ...

typescripttypestypescript-typings

How can you include a multi-layered array within another multi-layered array using TypeScript?

If we want to extend a two-dimensional array without creating a new one, the following approach can be taken: let array:number[][] = [ [5, 6], ]; We also have two other two-dimensional arrays named a1 and a2: let a1:number[][] = [[1, 2], [3, 4]]; let ...

javascriptarraystypescriptmultidimensional-array

Angular2 karma testing encounters a surprising anonymous System.register invocation

As I try to run Karma Tests in Angular2, I encounter the following error message. An Unexpected anonymous System.register call is causing an Uncaught TypeError at http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?38538ebca96bc7b222f7e7ba ...

typescriptjasmineangularkarma-runnersystemjs

The specified property 'slug' is not found within the designated type 'ParsedUrlQuery | undefined'

I am faced with an issue in my code where I am attempting to retrieve the path of my page within the getServerSideProps function. However, I have encountered a problem as the type of params is currently an object. How can I convert this object into a stri ...

javascripttypescriptnext.js

Navigating through diverse objects in Typescript

My challenge involves a state object and an update object that will merge with the state object. However, if the update value is null, it should be deleted instead of just combining them using {...a, ...b}. const obj = { other: new Date(), num: 5, ...

typescript