Webpack-类中箭头功能的意外令牌

我将Webpack 4与Express,React和Babel 7一起使用。它总是给我以下意外的令牌错误:

SyntaxError: /var/www/nodejs/modules/react/ShareStates.jsx: Unexpected token (11:15)    9 |    10 | export class ShareStatesContextProvider extends Component {
> 11 |     updatePath = (pathInput) => {
     |                
^   12 |         this.setState({   
13 |             path: pathInput   
14 |         })

我已经在网上进行了研究,那些人说我需要具有@ babel / plugin-proposal-class-properties。我添加了它,但对我不起作用。此外,这些结果大约是2017年。此问题是否有最新答案?

谢谢

代码是

import React,{ Component,createContext } from 'react';
//use context API reference
// https://www.taniarascia.com/using-context-api-in-react/

export const ShareStatesContext = createContext({
    path: "",updatePath: () => {}
});

export class ShareStatesContextProvider extends Component {
    updatePath = (pathInput) => {
        this.setState({
            path: pathInput
        })
    }

    state = {
        path: "",updatePath: this.updatePath
    }

    render() {
        return (
            <ShareStatesContext.Provider value={this.state}>
                {this.props.children}
            </ShareStatesContext.Provider>
        );
    }
}

webpacke.config.js是

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: path.resolve(__dirname,'./client.js'),output: {
        filename: 'bundle.js',path: path.join(__dirname,'public')
    },watch: true,watchOptions: {
        aggregateTimeout: 300,poll: 1000,ignored: /node_modules/
    },performance: {
        hints: false
    },mode: process.env.environment,resolve: { 
        extensions: ['.jsx','.js']
    },plugins: [
        new webpack.DefinePlugin({
            'process.props': JSON.stringify(process.props),'process.env': {
                NODE_ENV: JSON.stringify(process.env.environment)
            }
        })
    ],module: {
        rules: [
            {
                test: /\.jsx$/,exclude: /node_modules/,use: {
                    loader: 'babel-loader',options: {
                        presets: [
                            '@babel/preset-react','@babel/preset-env'
                        ],plugins: [
                            "@babel/plugin-transform-arrow-functions",'@babel/plugin-proposal-class-properties']
                    }
                }
            },]
    }
}

您能帮我弄清楚我需要添加什么才能使其生效吗?

package.json是

{
  "name": "nodejs","version": "0.0.0","private": true,"scripts": {
    "start": "npm-run-all --parallel watch:server watch:build","watch:build": "webpack --watch --config ./webpack.config.js","watch:server": "nodemon --inspect=0.0.0.0 ./bin/www"
  },"dependencies": {
    "abort-controller": "^3.0.0","apollo-boost": "^0.4.4","babel-core": "^6.26.3","babel-loader": "^8.0.6","babel-preset-env": "^1.7.0","babel-preset-react": "^6.24.1","babel-register": "^6.26.0","bluebird": "^3.7.1","cookie-parser": "~1.4.4","core-js": "^3.3.6","cors": "^2.8.5","debug": "~2.6.9","express": "~4.16.1","express-graphql": "^0.9.0","express-session": "^1.17.0","graphql": "^14.5.8","graphql-tag": "^2.10.1","graphql-type-json": "^0.3.0","hjs": "~0.0.6","http-errors": "~1.6.3","isomorphic-fetch": "^2.2.1","js-cookie": "^2.2.1","jsonwebtoken": "^8.5.1","ldapjs": "^1.0.2","luxon": "^1.21.1","morgan": "~1.9.1","nodemon": "^1.19.4","npm-run-all": "^4.1.5","react": "^16.11.0","react-bootstrap": "^1.0.0-beta.14","react-dom": "^16.11.0","regenerator-runtime": "^0.13.3","uuid": "^3.3.3"
  },"devDependencies": {
    "@babel/core": "^7.7.0","@babel/plugin-proposal-class-properties": "^7.7.0","@babel/plugin-transform-arrow-functions": "^7.2.0","@babel/preset-env": "^7.7.1","@babel/preset-react": "^7.7.0","webpack": "^4.41.2","webpack-cli": "^3.3.10"
  }
}
fan7286508 回答:Webpack-类中箭头功能的意外令牌

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3140885.html

大家都在问