反应：模块解析失败：意外的令牌答案

【问题标题】：React: Module parse failed: Unexpected token反应：模块解析失败：意外的令牌
【发布时间】：2019-04-06 08:43:13
【问题描述】：

开始学习反应试图遵循互联网上的一些指示和完成基本设置，但出现以下错误：

>  ERROR in ./src/index.js 7:11
>     Module parse failed: Unexpected token (7:11)

You may need an appropriate loader to handle this file type.
|     render(){
|        return (
>            <div>
|                <h1>Hello!</h1>
|            </div>

【问题讨论】：

你能展示你的 webpack 配置和 babel 配置吗？
不幸的是堆栈溢出不允许添加更多代码，它说“你的问题太多代码”
所以自己添加更多的cmets，有很多代码的问题。您也可以使用codesandbox或类似的。
我猜你没有设置 js/jsx 文件扩展名来加载 babel loader {test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/}
完全正确 - 你不用加载器来加载它们。

标签： reactjs webpack

【解决方案1】：

配置 webpack 和 babel 并不是“开始学习 react”时最简单的步骤之一，所以我建议使用create-react-app。

https://facebook.github.io/create-react-app/docs/getting-started

【讨论】：

【解决方案2】：

你的 webpack 配置应该使用加载器加载文件。使用 webpack 4 和 babel 7 的示例 webpack 配置：

const path = require('path');
const webpack = require('webpack');
const urlLoader = require('url-loader');

// copy manifest.json to the path: 'public/build'
// this will allow for the authRequest to see the file at www.example.com/manifest.json
const CopyWebpackPlugin = require('copy-webpack-plugin');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
    inject: 'body'
});

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    target: 'web',
    output: {
        path: path.resolve('dist'),
        filename: 'index_bundle.js',
    },
    devtool: "source-map",
    devServer: {
        historyApiFallback: true,
        watchOptions: {aggregateTimeout: 300, poll: 1000},
        headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
            "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization",
        },
    },
    module: {
        rules: [
            {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
            {test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
            {
                test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
                loader: 'file-loader',
            },
            {test: /\.css$/, loader: 'style-loader!css-loader'}
        ]
    },
    plugins: [HtmlWebpackPluginConfig]
};

请注意，您的配置中是 babel-loader 而不是 babel linke。 现在我的依赖项：

"@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/plugin-proposal-function-bind": "^7.2.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
    "@babel/plugin-transform-shorthand-properties": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "bootstrap": "^3.3.7",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "deep-freeze": "^0.0.1",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "json-loader": "^0.5.7",
    "path": "^0.12.7",
    "style-loader": "^0.16.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.2.0",
    "webpack-dev-server": "^3.1.14"

当然，您的情况可能不需要其中一些。还可以考虑使用 webpack-encore - 它是 webpack 的更简单版本，首先是为了更容易与 symfony 后端合作，但对于其他后端来说完全没问题。参见例如。 webpack (-encore) 配置：

// webpack.config.js
const Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public')
    .setPublicPath('/')

    // read main.js     -> output as web/build/app.js
    .addEntry('js/main', './public/src/main.js')
    // read global.scss -> output as web/build/global.css
    .addStyleEntry('css/styles', './public/scss/global.scss')
    .disableSingleRuntimeChunk()
    // enable features!
    .enableSassLoader()
    .autoProvidejQuery()
    .enableSourceMaps(!Encore.isProduction());

module.exports = Encore.getWebpackConfig();

【讨论】：