Node.js TSLoader&x2B；Babel Polyfill：在运行npm运行构建时，您可能需要额外的加载程序来处理这些加载程序的结果

我想使用ts加载器与巴贝尔polyfill，但没有巴贝尔加载器。 但是当我尝试构建项目时，我得到了这个错误。谁能告诉我我错过了什么

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]

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"
                }
            }
        }
    }
  };

---

我也面临同样的问题。将tsconfig.json中的

“jsx”：“preserve”

更改为

“jsx”：“react”

，解决了这个问题

preserve

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

---

如果您想使用babel来编译JSX，那么您必须使用

babel preset react app

并使用babel loader而不是ts loader

我也面临同样的问题。将tsconfig.json中的

“jsx”：“preserve”

更改为

“jsx”：“react”

，解决了这个问题

preserve

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

如果您想使用babel来编译JSX，那么您必须使用

babel preset react app

并使用babel loader而不是ts loader

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"
                }
            }
        }
    }
  };