React.js-babel-loader-意外令牌

Question

我有無法解決的問題。 對於類似問題，有很多答案，但它們並不適用（我認為）。

我有一些文件。 讓我們從package.json開始：

{
  "name": "react-tut",
  "version": "0.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "babel-core": "^6.11.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.11.5",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "devDependencies": {},
  "scripts": {
    "dev": "./node_modules/.bin/webpack-dev-server --content-base src --inline --hot",
    "setDebug": "set NODE_ENV=debug",
    "setProduction": "set NODE_ENV=production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

webpack.config.js：

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
const path = require("path");

module.exports = {
    context: path.join(__dirname, "src"),
    devtool: debug ? "inline-sourcemap" : null,
    entry: "./js/client.js",
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /(node_modules|bower|components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-0'],
                    plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
                }
            }
        ]
    },
    output: {
        path: path.join(__dirname, "src"),
        filename: "client.min.js"
    },
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({mangle: false, sourcemap: false}),
    ],
};

client.js：

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

import Layout from "./components/Layout";

const app = document.getElementById('app');
ReactDOM.render(<Layout/>, app);

Layout.js：

import React from "react";

export default class Layout extends React.Component {
    render() {
        return <h1>Wololo?</h1>;
    }
}

當我運行webpack以下錯誤：

ERROR in ./js/components/Layout.js
Module parse failed: C:\Users\onlin\WebstormProjects\react-tut\src\js\components\Layout.js Unexpected token (5:15)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (5:15)
    at Parser.pp.raise (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:923:13)
    at Parser.pp.unexpected (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:1490:8)
    at Parser.pp.parseExprAtom (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:333:12)
    at Parser.pp.parseExprSubscripts (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:228:19)
    at Parser.pp.parseMaybeUnary (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:207:17)
    at Parser.pp.parseExprOps (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:154:19)
    at Parser.pp.parseMaybeConditional (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:136:19)
    at Parser.pp.parseMaybeAssign (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:112:19)
    at Parser.pp.parseExpression (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:88:19)
    at Parser.pp.parseReturnStatement (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:1872:26)
    at Parser.pp.parseStatement (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:1737:19)
    at Parser.pp.parseBlock (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:2009:21)
    at Parser.pp.parseFunctionBody (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:610:22)
    at Parser.pp.parseMethod (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:579:8)
    at Parser.pp.parseClassMethod (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:2155:23)
    at Parser.pp.parseClass (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:2140:10)
    at Parser.pp.parseExprAtom (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:324:19)
    at Parser.pp.parseExprSubscripts (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:228:19)
    at Parser.pp.parseMaybeUnary (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:207:17)
    at Parser.pp.parseExprOps (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:154:19)
    at Parser.pp.parseMaybeConditional (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:136:19)
    at Parser.pp.parseMaybeAssign (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:112:19)
    at Parser.pp.parseExport (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:2181:21)
    at Parser.pp.parseStatement (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:1762:85)
    at Parser.pp.parseTopLevel (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:1666:21)
    at Parser.parse (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:1632:17)
    at Object.parse (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:885:44)
    at Parser.parse (C:\Users\onlin\WebstormProjects\react-tut\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (C:\Users\onlin\WebstormProjects\react-tut\node_modules\webpack\lib\NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (C:\Users\onlin\WebstormProjects\react-tut\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
 @ ./js/client.js 11:14-44

錯誤指向Layout.js中的<字符。 我正在遵循本教程 ，將Layout類移至單獨的文件（與client.js分離）后，此錯誤開始出現。 我怎么解決這個問題？

Answer 1

在您的webpack配置文件中， components文件夾被設置為從babel排除。

module: {
    loaders: [
        {
            test: /\.js?$/,
            exclude: /(node_modules|bower|components)/,
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015', 'stage-0'],
                plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
            }
        }
    ]
}

因此，無法識別JSX結構中的組件<Layout> 。