Webpack + React16 + Javascript ES6“意外令牌”错误答案

【问题标题】：Webpack + React16 + Javascript ES6 "Unexpected token" errorWebpack + React16 + Javascript ES6“意外令牌”错误
【发布时间】：2017-11-18 15:34:25
【问题描述】：

我知道这个问题被问了大约一千次，但我没有找到任何有效的解决方案。我仍然遇到同样的错误。这是我的配置文件：

package.json:

{
    "scripts": {
        "start": "webpack-dev-server",
        "build": "webpack"
    },
    "dependencies": {
        "jquery": "^3.2.1",
        "react": "^16.1.1",
        "react-dom": "^16.1.1"
    },
    "devDependencies": {
        "babel": "^6.23.0",
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1",
        "clean-webpack-plugin": "^0.1.17",
        "css-loader": "^0.28.7",
        "html-webpack-plugin": "^2.30.1",
        "style-loader": "^0.19.0",
        "webpack": "^3.8.1",
        "webpack-dev-server": "^2.9.4"
    }
}

webpack.config.js：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: './src/app/app.jsx',
    devtool: 'source-map',
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        hot: true
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ],
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                query:
                    {
                        presets: ['es2015', 'react']
                    }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/app/index.html'
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    }
};

app.jsx:

import React from "react"

React.render(<h1>hello world</h1>, document.getElementById("root-component"));

Webpack 抛出以下错误：

ERROR in ./src/app/app.jsx
Module parse failed: Unexpected token (3:13)
You may need an appropriate loader to handle this file type.
| import React from "react"
|
| React.render(<h1>hello world</h1>, document.getElementById("root-component"));

我尝试了多种解决方案（例如添加带有预设的 .babelrc 文件），但没有任何效果。有什么帮助吗？

【问题讨论】：

您是否尝试过import ReactDOM from 'react-dom' 而不是使用React 在浏览器中呈现应用程序？
是的，我试过了。结果相同。
根据 React 文档，您必须使用 ReactDOM.render。当然，正如@AranS 已经建议的那样，您也必须使用import ReactDOM from 'react-dom'（请注意，ReactDOM 只是一个名称）。
你有.babelrc 吗？

标签： javascript reactjs webpack babeljs

【解决方案1】：

根据 webpack v3，您的 webpack.config.js 不正确。

您需要在 rules 数组中添加另一个条目，就像加载 CSS 一样。
而且query应该改名为options。

有关从 v2 迁移到 v3 的更多信息，请参阅 Webpack Documentation

固定的webpack.config.js如下：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: './src/app/app.jsx',
    devtool: 'source-map',
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        hot: true
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: ['es2015', 'react']
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ],
            }
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/app/index.html'
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    }
};

之前：

./src/app/app.jsx 中的错误模块解析失败：意外令牌 (3:13)

Ater（正确创建的包）：

app.bundle.js 424 kB 0 [emitted] [big] main app.bundle.js.map 499 kB 0 [emitted] main

【讨论】：