TSLoader + Babel Polyfill : You may need an additional loader to handle the result of these loaders while running npm run build

Question

I would like to use ts-loader with babel-polyfill but without babel-loader. But when I try to build the project, I am getting this errors. Can anybody tell me what I am missing.

ERROR in ./src/index.tsx 4:16
Module parse failed: Unexpected token (4:16)
File was processed with these loaders:
 * ./node_modules/ts-loader/index.js
 * ./node_modules/tslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
| import ReactDOM from "react-dom";
| import { MyComponent } from "./containers/my-component";
> ReactDOM.render(<MyComponent/>, document.getElementById("root"));
@ multi babel-polyfill ./src/index.tsx kb[1]

|

Package.json

{
    "name": "test-react",
    "version": "1.0.0",
    "description": "Test",
    "main": "index.js",
    "scripts": {
        "start": "node index.js",
        "build": ".\\node_modules\\.bin\\webpack --config webpack.dev.js",
        "build-w": ".\\node_modules\\.bin\\webpack -w --config webpack.dev.js",
        "prod-build": ".\\node_modules\\.bin\\webpack --config webpack.prod.js"
    },
    "devDependencies": {
        "@types/node": "^12.0.0",
        "@types/prop-types": "^15.7.1",
        "@types/react": "^16.8.16",
        "@types/react-dom": "^16.8.4",
        "@types/react-router-dom": "^4.3.3",
        "@types/react-select": "^2.0.17",
        "@types/react-tabs": "^2.3.1",
        "css-loader": "^2.1.1",
        "source-map-loader": "^0.2.4",
        "style-loader": "^0.23.1",
        "terser": "3.17.0",
        "ts-loader": "^6.0.0",
        "tslint": "^5.16.0",
        "tslint-loader": "^3.5.4",
        "tslint-react": "^4.0.0",
        "typescript": "^3.4.5",
        "webpack": "^4.30.0",
        "webpack-cli": "^3.3.2",
        "webpack-merge": "^4.2.1"
    },
    "dependencies": {
        "babel-polyfill": "^6.26.0",
        "bootstrap": "^4.3.1",
        "jquery": "^3.4.1",
        "jquery-ui": "^1.12.1",
        "mobx": "^4.9.4",
        "mobx-react": "^5.4.3",
        "prop-types": "^15.7.2",
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-router-dom": "^5.0.0",
        "react-select": "^2.4.3",
        "react-tabs": "^3.0.0"
    }
}

webpack.config.js

const path = require("path");
const webpack = require('webpack');

module.exports = {
    entry: {
        kb: ["babel-polyfill", "./src/index.tsx"]
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].bundle.js"
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json"]
    },

    mode: "development",

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be pre handled by 'tslint-loader'.
            {
                test: /\.tsx?$/,
                enforce: 'pre',
                loader: "tslint-loader",
                options: {
                    configFile: 'tslint.json',
                    // Linting issues will be shown as warnings and build won't fails.
                    // Make it true to fail webpack build on linting errors.
                    emitErrors: true,
                    fileOutput: {
                        // The directory where each file's report is saved 
                        dir: '/target/lint-errors/kb-react',
                        // If true, all files are removed from the report 
                        // directory at the beginning of run 
                        clean: true
                    }
                }
            },

            // All files with a '.css' extension will be handled by 'css-loader' 
            {
                test: /\.css$/, use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' }
                ]
            },

            // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
            { test: /\.tsx?$/, loader: "ts-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },
    optimization: {
        runtimeChunk: "single", // enable "runtime" chunk
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "all"
                }
            }
        }
    }
  };

Answer 1

I was also facing the same issue. Changing the "jsx": "preserve" to "jsx": "react" in the tsconfig.json fixed the issue

The preserve mode will keep the JSX part intact, that is what is causing this issue. You need to make sure that the JSX is transformed into JS. TypeScript doc on JSX

If you want to use babel for compiling JSX then you will have to use babel preset react-app and use babel-loader instead of ts-loader