ReactJS语法错误:意外的令牌 [英] ReactJS Syntax Error: Unexpected Token

问题描述

我在ReactJS应用程序上得到了意外令牌.但是我相信语法是正确的.

I am getting the Unexpected Token on my ReactJS application. But I believe the syntax is correct.

import React, { Component } from 'react';

class Auth extends Component {
    constructor(){
        super()
        this.state={
            authStatus: "Sign In",
            isAuthenticated: false
        }
    }
    AuthMe = () =>{
        console.log("Working")
    }
    render() {
        return (
            <button type="button" onClick={this.AuthMe}>{this.state.authStatus}</button>
        );
    }
}

export default Auth;

./src/components/Auth/index.js中的错误 模块构建失败:SyntaxError:意外令牌(11:11)

ERROR in ./src/components/Auth/index.js Module build failed: SyntaxError: Unexpected token (11:11)

> 11 |     AuthMe = () =>{
     |            ^
  12 |         console.log("Working")
  13 |     }

我想念什么?

这是我的webpack.config.js

Here's my webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: [
        path.resolve(__dirname, 'node_modules'),
      ],
      loader: 'babel-loader',
    }]
  },
  resolve: {
    extensions: ['.json', '.js', '.jsx', '.css']
  },
  devtool: 'source-map',
  devServer: {
    historyApiFallback: true
  }
};

.babelrc

{
    "presets": ["es2015","react","stage-0"],
    "plugins": ["transform-decorators-legacy"]
}

推荐答案

我在这里之前回答了这个问题:

I answered this question before here: Arrow Function syntax not working with webpack?

TLDR那个粗箭头是否尚未在ES201的任何标准中出现.您需要添加其他babel变换.

TLDR Is that that fat arrow is not yet in the ES201whatever standard. You'll need to add an additional babel transform.

npm install --save-dev babel-plugin-transform-class-properties

看到上面的babelrc配置，运行上面的内容，然后将.babelrc更改为

saw your babelrc config above, run the above then change .babelrc to

{
    "presets": ["es2015","react","stage-0"],
    "plugins": ["transform-decorators-legacy", "transform-class-properties"]
}

这篇关于ReactJS语法错误:意外的令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！