React.js-babel加载程序-意外的令牌

React.js - babel-loader - Unexpected token

本文关键字:意外 令牌 程序 js-babel 加载 React      更新时间:2023-09-26

我有一个无法解决的问题。类似的问题有很多答案,但它们并不适用(我认为)。

我有一些文件。让我们从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);

布局.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)后,这个错误开始出现。我该如何解决这个问题?

在您的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>