首頁(yè) 猿問 babel-loader...

babel-loader jsx語(yǔ)法錯(cuò)誤：意外的令牌

JavaScript React.JS

呼啦一陣風(fēng) 2019-07-29 16:32:40

babel-loader jsx語(yǔ)法錯(cuò)誤：意外的令牌我是React + Webpack的初學(xué)者。我在我的hello world web應(yīng)用程序中發(fā)現(xiàn)了一個(gè)奇怪的錯(cuò)誤。我在webpack中使用babel-loader來幫助我將jsx轉(zhuǎn)換為js，但看起來babel無法理解jsx語(yǔ)法。這是我的依賴項(xiàng)："devDependencies": { "babel-core": "^6.0.14", "babel-loader": "^6.0.0", "webpack": "^1.12.2", "webpack-dev-server": "^1.12.1"},"dependencies": { "react": "^0.14.1"}這是我的 webpack.config.jsvar path = require('path');module.exports = { entry: ['webpack/hot/dev-server',path.resolve(__dirname, 'app/main.js')], output: { path: path.resolve(__dirname, 'build'), filename: 'bundle.js' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"} ] }};這是我的 app/main.jsvar React = require("react");React.render(<h1>hello world</h1>,document.getElementById("app"));這是錯(cuò)誤信息ERROR in ./app/main.jsModule build failed: SyntaxError: ~/**/app/main.js: Unexpected token (2:13) 1 | var React = require("react");> 2 | React.render(<h1>hello world</h1>,document.getElementById("app")); | ^at Parser.pp.raise (~/**/node_modules/babylon/lib/parser/location.js:24:13)謝謝你們。

查看完整描述

3 回答

蕪湖不蕪

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超7個(gè)贊

由于上面的答案仍然讓一些人處于黑暗中，這就是完整的webpack.config.js的樣子：

var path = require('path');var config = {
    entry: path.resolve(__dirname, 'app/main.js'),
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            loader: 'babel',
            query:
            {
                presets:['es2015', 'react']
            }
        }]
    },};module.exports = config;

反對(duì) 回復(fù) 2019-07-29