React，Babel，Webpack 不解析 jsx，意外令牌错误 [重复]

Posted 2023-02-22

【中文标题】React，Babel，Webpack 不解析 jsx，意外令牌错误 [重复]

【英文标题】：React, Babel, Webpack not parsing jsx, unexpected token error [duplicate]

【发布时间】：2016-08-24 22:49:16

【问题描述】：

我正在尝试使用 wepback 构建我的应用程序，但遇到了 unexpected token 错误。我的项目的所有依赖项都很好并且是最新的/p>

这是我的 app.jsx

import React                from 'react';
import ReactDOM             from 'react-dom';
import Router             from 'react-router';
import Routes               from '../routes/routes';
import injectTapEventPlugin from 'react-tap-event-plugin';
import  browserHistory    from 'react-router';

require('../Config');

injectTapEventPlugin();

window.EventEmitter = 
    _events: ,
    dispatch: function (event, data, returnFirstResult) 
        if (!this._events[event]) return;
        for (var i = 0; i < this._events[event].length; i++)
        
            if(this._events[event][i])
            
                var r = this._events[event][i](data);

                if(returnFirstResult)   
                    return r;
            
        
    ,
    subscribe: function (event, callback, onlyOne) 
        if (!this._events[event] || onlyOne) this._events[event] = []; // new event
        this._events[event].push(callback);
    
;

// Render the main app react component into the app div.
// For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
ReactDOM.render(<Router history=browserHistory>Routes</Router>, document.getElementById('app'));

这是我的 config.js

var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname, '../project/public/js/');
var nodeModulesPath = path.resolve(__dirname, 'node_modules');
var TransferWebpackPlugin = require('transfer-webpack-plugin');

var config = 
    entry: 
        app: path.join(__dirname, '/app/entry_points/app.jsx'),
        vendor: ['react', 'radium'],
    ,
    resolve: 
        extensions: ["", ".js", ".jsx"]
    ,

    devtool: 'source-map',
    output: 
        path: buildPath,
        publicPath: '/js/',
        filename: 'mobile.[name].js' 
    ,
    plugins: [
        new webpack.optimize.CommonsChunkPlugin("vendor", "mobile.vendor.js"),
        new webpack.DefinePlugin(),
        new webpack.NoErrorsPlugin(),
    ],
    module: 
        preLoaders: [
            
                test: /\.(js|jsx)$/,
                loader: 'eslint-loader',
                include: [path.resolve(__dirname, "src/app")],
                exclude: [nodeModulesPath]
            ,
        ],
        loaders: [
            
                test: /\.(js|jsx)$/,
                loaders: [
                    'babel-loader'
                ],
                exclude: [nodeModulesPath]
            ,
            
                test: /\.css$/,
                loader: "style-loader!css-loader"
            ,
        ]
    ,
    eslint: 
        configFile: '.eslintrc'
    ,
;

module.exports = config;

这是我尝试构建时遇到的错误：

ERROR in ./app/entry_points/app.jsx
Module build failed: SyntaxError: /home/zeus/Glide/project/project-mobile/app/entry_points/app.jsx: Unexpected token (46:16)
  44 | // Render the main app react component into the app div.
  45 | // For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
> 46 | ReactDOM.render(<Router history=browserHistory>Routes</Router>, document.getElementById('app'));
     |                 ^

我正在使用reactv0.14.8，react-domv0.14.8，babel-loader^6.2.1

【参考方案1】：

我相信你需要用 babel 指定预设并安装 npm 模块babel-preset-react

loaders: [
        
            test: /\.(js|jsx)$/,
            loaders: [
                'babel-loader'
            ],
            exclude: [nodeModulesPath],
            query: 
              presets: ['react']
            
        ,
        ...
    ]

如果您正在使用它，您还想将es2015 添加到该预设数组中。

【讨论】：

绝对有可能。 OP 可能想查看this 站点。当我升级 React 版本时，它帮助我加载。

由于我们不能定义查询和多个加载器，所以很容易创建 .babelrc 文件并将预设放入其中。谢谢它解决了问题