TSLoader + Babel Polyfill：在运行 npm run build 时，您可能需要一个额外的加载器来处理这些加载器的结果

Question

我想将 ts-loader 与 babel-polyfill 一起使用，但没有 babel-loader。但是当我尝试构建项目时，我收到了这个错误。谁能告诉我我错过了什么。

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]

|

包.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

我也面临同样的问题。更改"jsx": "preserve"到"jsx": "react"在tsconfig.json解决了该问题

该preserve模式将保持 JSX 部分完好无损，这就是导致此问题的原因。您需要确保将 JSX 转换为 JS。JSX 上的 TypeScript 文档

如果你想使用 babel 来编译 JSX 那么你将不得不babel preset react-app使用 babel-loader 而不是 ts-loader