Webpack - Babel - 解析 JSX: SyntaxError: Unexpected token

Posted 2023-02-22

【中文标题】Webpack - Babel - 解析 JSX: SyntaxError: Unexpected token

【英文标题】：Webpack - Babel - Parsing JSX: SyntaxError: Unexpected token

【发布时间】：2016-12-15 09:28:03

【问题描述】：

我正在尝试使用 webpack 创建一个 React 应用程序。我正在使用 babel 转译 .jsx 文件。但似乎，它没有使用 babel loader 来加载 .jsx 文件。我收到以下错误：

ERROR in ./app.jsx
Module parse failed: C:\codebase\react-demo/app\app.jsx Unexpected token (7:15)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (7:15)
    at Parser.pp$4.raise (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp.unexpected (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1597:21)
    at Parser.pp$3.parseExpression (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1573:21)
    at Parser.pp$1.parseReturnStatement (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:839:33)
    at Parser.pp$1.parseStatement (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:699:34)
    at Parser.pp$1.parseBlock (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:981:25)
    at Parser.pp$3.parseFunctionBody (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:2105:24)
    at Parser.pp$3.parseMethod (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:2075:10)
    at Parser.pp$1.parseClassMethod (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1137:25)
    at Parser.pp$1.parseClass (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1118:14)
    at Parser.pp$1.parseStatement (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:697:19)
    at Parser.pp$1.parseTopLevel (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:638:25)
    at Parser.parse (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:516:17)
    at Object.parse (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:3098:39)
    at Parser.parse (C:\codebase\react-demo\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (C:\codebase\react-demo\node_modules\webpack\lib\NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (C:\codebase\react-demo\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
    at nextLoader (C:\codebase\react-demo\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
    at C:\codebase\react-demo\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
    at Storage.finished (C:\codebase\react-demo\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
    at C:\codebase\react-demo\node_modules\graceful-fs\graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3)

我的webpack.config.js 看起来像：

var webpack = require('webpack');
var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');

var __dirname = path.resolve();

module.exports = 
    context: __dirname + "/app",
    entry: "./app.jsx",
    output: 
        path: __dirname + "/dist/",
        filename: "bundle.min.js"
    ,
    loaders: [
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
    ],
    plugins: [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin( mangle: false, sourcemap: false ),
        new HtmlWebpackPlugin(
            template: 'index.html'
        )
    ],
;

我的 app.jsx（位于 ./app/app/jsx）是：

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component 

    render() 
        return <div > Test < /div>;
    


ReactDOM.render(<App/>, document.getElementById('app'));

我有关注.babelrc：

    "presets": ["es2015", "stage-0", "react"]

我安装了以下节点依赖项：

"devDependencies": 
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "html-webpack-plugin": "^2.22.0",
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"

知道我会错过什么吗？

【参考方案1】：

问题出在加载器配置中。

属性loaders 应该在对象module 中。

module.exports = 
    …
    module: 
        loaders: [
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        ],
    ,
    …
;

见https://webpack.github.io/docs/loaders.html

【讨论】：

谢谢乔卡。这就是问题所在。在module 中移动loaders 解决了这个问题。