React TypeScript Error: You may need an additional loader to handle the result of these loaders

I was facing this error when I tried to convert React app to TypeScript.

ERROR in ./src/client/components/header/Header.tsx 45:12
[1] Module parse failed: Unexpected token (45:12)
[1] File was processed with these loaders:
[1]  * ./node_modules/ts-loader/index.js
[1] You may need an additional loader to handle the result of these loaders.

Upon further investigation, it turned out that in tsconfig.json, I needed to change the value of jsx from preserve to react.

From this

"jsx": "preserve"

to this

"jsx": "react"

Then also I needed to add ts-loader to webpack.config.js. (Don't forget to install it. npm i -D ts-loader)

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

Then also the extension for jsx needed to be added.

resolve: {
  extensions: ["*", ".js", ".jsx", ".tsx"],
},

Then the error disappeared, and I started seeing the rendered page.

Source:https://stackoverflow.com/questions/56845547/tsloader-babel-polyfill-you-may-need-an-additional-loader-to-handle-the-resu