Updating from webpack v1 to v2 using webpack-cli results in a tsx error during migration

Encountering an error during the build process after migration, I'm unsure if it's related to the recognition of tsx files or something within them that is causing issues:

Failed to compile. Error in ./src/index_app.tsx Module parse failed: /src/index_app.tsx Unexpected token (17:26) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (17:26) @ multi main

Here is the content of index_app.tsx:

17:const rootReducer = (state:any, action:any) => {
18:    if (action.type === Actions.RESET_GLOBAL_STATE) {
19:        state = undefined;
20:    }
21:    return reducers(state, action)
22:}

My webpack configuration post-migration:

https://pastebin.com/KX02ZRUY

typescriptwebpackwebpack-2

Answer №1

there seems to be an issue with recognizing tsx files or specific content within a tsx file that is causing a problem

The system is unable to identify tsx files.

I suggest making the following changes:

    {
        test: /\.(ts|tsx)$/,
        include: paths.appSrc,
        use: [{
            loader: 'ts-loader'
        }],
    }

For best practices, refer to the official documentation: https://webpack.js.org/guides/webpack-and-typescript/

 {
   test: /\.tsx?$/,
   exclude: /node_modules/,
   use: [ 'ts-loader' ]
 }

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

Issue with MIME handling while utilizing Vue-Router in combination with Express

Struggling to access a specific route in Express, I keep encountering an error in my browser. Additionally, when the Vue application is built, only the Home page and the 404 page seem to work properly, while the rest display a default empty HTML layout. F ...

javascripttypescriptvue.jsexpressvue-router

How to avoid truncating class names in Ionic 4 production build

I have been working on an ionic 4 app and everything was going smoothly until I encountered an issue with class names being shortened to single alphabet names when making a Prod build with optimization set to true. Here is an example of the shortened clas ...

angularionic-frameworkwebpackionic4

typegrapql encounters an issue with experimentalDecorators

I'm currently delving into TypeGraphQL and working on building a basic resolver. My code snippet is as follows: @Resolver() class HelloReslover { @Query(() => String) async hello(){ return "hello wtold" } } However, ...

node.jstypescriptgraphqltypegraphql

Mismatch between TypeScript library and Angular web application: certain properties are absent

I am currently facing a dilemma with my two angular projects. The first one is a library while the second one is a regular Angular webapp. Within my library project, I have the following code snippet: class User { firstName: string; lastName: stri ...

angulartypescript

How should one properly assign an element type provided as an argument?

I'm attempting to define a type for an element passed as a parameter using React.ComponentType. import * as React from "react" type BaseType = { element: React.ComponentType } const Base = ({element: Element}: BaseType) => ( <Ele ...

reactjstypescript

Guide on how to connect several Subjects within an object literal to their corresponding Observables in another object literal

I am currently developing a class using Angular and I need to share multiple states associated with that class. To accomplish this, I have created several instances of BehaviorSubject private subjects = { a : new BehaviorSubject<A>(this.a), b ...

angulartypescriptrxjsobservable

Error message: The property 'data' is not recognized within this context. Additionally, the property 'datatime' does not exist on the current type

I'm currently working on generating a graph using Firestore data and ng2charts. However, when I run my code, I encounter the following errors: Property 'data' does not exist on type 'unknown', causing an error in item.data Simila ...

angulartypescriptionic-frameworkgoogle-cloud-firestoreng2-charts

Indicate a specific type for the Express response

Is there a method to define a specific type for the request object in Express? I was hoping to customize the request object with my own type. One approach I considered was extending the router type to achieve this. Alternatively, is there a way to refactor ...

node.jstypescriptexpress

Reinforced.Typings does not generate fully qualified names (FQN) for types when UseModules is set to true or false

Overview: Within my solution, I have two projects: ProjA and ProjB. In ProjA, I've defined a custom RTConfigure method to streamline the configuration process for translating C# to TypeScript using the Reinforced.Typings tool. Meanwhile, ProjB houses ...

c#typescriptcode-translationreinforced-typings

Mistakes that occur while trying to expand a base class to implement CRUD functionality

Creating a base class in TypeScript for a node.js application to be extended by all entities/objects for CRUD operations is my current challenge. The base class implementation looks like this: export class Base { Model: any; constructor(modelName ...

node.jstypescript

typescript defining callback parameter type based on callback arguments

function funcOneCustom<T extends boolean = false>(isTrue: T) { type RETURN = T extends true ? string : number; return (isTrue ? "Nice" : 20) as RETURN; } function funcCbCustom<T>(cb: (isTrue: boolean) => T) { const getFirst = () => ...

javascripttypescripttypescript-generics

Create a tuple type by mapping an object with generics

I have a specified object: config: { someKey: someString } My goal is to generate a tuple type based on that configuration. Here is an example: function createRouter< T extends Record<string, string> >(config: T) { type Router = { // ...

typescript

Checking React props in WebStorm using type definitions

Currently, I am utilizing WebStorm 2018.3.4 and attempting to discover how to conduct type checking on the props of a React component. Specifically, when a prop is designated as a string but is given a number, I would like WebStorm to display an error. To ...

reactjstypescriptwebstormtsd

Struggling with fetching the email value in .ts file from ngForm in Angular?

I'm trying to retrieve the form value in my .ts file, but I am only getting the password value and not the email. Here is the code snippet: <div class="wrapper"> <form autocomplete="off" class="form-signin" method="post" (ngSubmit)="lo ...

angulartypescript

Utilizing the Loess npm module in conjunction with Angular 4

I am attempting to incorporate the Loess package into my project. The package can be found on NPM and offers various regression models for data fitting. I successfully installed it using npm install loess --save, and it now resides in the node_modules dire ...

javascriptangulartypescriptnpmtypescript-typings

Complete set of keys within a type

In my TypeScript project, I am working with an API (specifically OData API) to retrieve data. This API allows the selection of specific fields to retrieve. For example, api/some/getbyid(42)?$select=x,y,z can be used to get fields x, y, and z, along with s ...

typescript

Utilizando Typescript com Ionic 2 e AngularJS para autenticar através de um método de post na requisição HTTP e

Greetings and good afternoon to everyone. I hope you all are doing well. I am a beginner in AngularJS, currently using Visual Studio, Ionic 2, and TypeScript. I have successfully connected my app to a REST API in .NET and have implemented a token for tes ...

angularjshttptypescriptionic2token

Navigating Angular: Uncover the Secrets of Unwrapping Json Data

I need some help with parsing Json data in Angular TypeScript. The data is structured as follows: https://i.sstatic.net/H7s8q.png When calling a REST API, I want to convert a Java class object into an array of model classes. How can this be achieved? "g ...

jsonangulartypescriptobservablehttpclient

validating if Object may be either 'null' or 'undefined'

In the code snippet below, I am attempting to verify whether hostel.country.address is null: return hostel.country.address && hostel.country.address.internalEmployeeIdentifier !== null || hostel.country.address.exter ...

javascriptnode.jstypescript

I'm trying to figure out how to incorporate types for utilizing Intl.ListFormat in node v12. Can

I am currently working with nodeJS version 12.10.0, which now includes support for Intl.ListFormat. I am also using Typescript version 3.6.3. However, when compiling my code with Typescript, I encounter the following error: Property 'ListFormat' ...

javascriptnode.jstypescript