Question

我在Google上发现了很多与此问题有关的问题

但它们都无法帮助我解决问题。

我的JS代码：

import React from 'react';

class Send extends React.Component{
state = {
    input: ''
}
handleChange=(e)=>{
    this.setState({
        input:e.target.value
    });
}
handleSubmit=(e)=>{
    e.preventDefault();
}
render(){
    return(
        <form onSubmit={this.handleSubmit}>
            <input value={this.state.input} onChange={this.handleChange}/>
            <button type="submit">Submit</button>
        </form>
    )
}
}

export default Send;

我收到此错误：

模块构建失败（来自./node_modules/babel-loader/lib/index.js）：语法错误：C：/xampp/htdocs/ReactStudy/contextAPI/public/src/send.js：意外令牌（4:10）

 2 | 
 3 | class Send extends React.Component{
 > 4 |     state = {
   |           ^
 5 |         input: ''
 6 |     }
 7 |     handleChange=(e)=>{

.babelrc代码：

{
 "presets": [
  "env",
  "react",
  "stage-3"
]
}

webpack.config.js

const webpack = require('webpack');

 module.exports = {
 entry: [
'react-hot-loader/patch',
'./public/src/app.js'
 ],
 module: {
  rules: [
  {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: ['babel-loader']
  }
]
},
 resolve: {
extensions: ['*', '.js', '.jsx']
},
 output: {
path: __dirname + '/public',
publicPath: '/',
filename: 'bundle.js'
},
 plugins: [
 new webpack.HotModuleReplacementPlugin()
],
devServer: {
  contentBase: './public',
 hot: true
}
};

我的package.json：

{
"name": "react-study",
"version": "1.0.0",
"description": "folder-with-react-examples",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode 
  development",
 "test": "test if working"
 },
 "author": "reactDeveloper",
 "license": "ISC",
 "babel": {
   "presets": [
    "env",
    "react",
    "stage-3"
    ]
  },
 "devDependencies": {
   "babel-core": "^6.26.3",
   "babel-loader": "^7.1.5",
   "babel-plugin-transform-class-properties": "^6.24.1",
   "babel-preset-env": "^1.7.0",
   "babel-preset-es2017": "^6.24.1",
   "babel-preset-react": "^6.24.1",
   "babel-preset-stage-3": "^6.24.1",
   "react-hot-loader": "^4.3.3",
   "webpack": "^4.15.1",
   "webpack-cli": "^3.0.8",
   "webpack-dev-server": "^3.1.4"
 },
 "dependencies": {
   "react": "^16.4.1",
   "react-dom": "^16.4.1"
  }
}

我尝试了一些解决问题的方法。

例如：

我尝试了webpack.config.js文件中的编辑模块

  module: {
rules: [
  {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: ['babel-loader']
  }
]
},

到

module:{  
  loaders: [{
   test: /\.js?$/,
   loader: 'babel-loader',
   query  :{
     presets:['react','es2017']//installed es2017 instead of es2015
   },
   exclude: /node_modules/
  }
]},

使用此webpack.config.js，当我执行npm start时，cmd会显示此类错误

无效的配置对象。已使用与API模式不匹配的配置对象初始化Webpack。 -配置具有未知属性“ postcss”。这些属性是有效的：对象{amd？，bail？，cache？，context？，dependencies？，devServer？，devtool？，entry，externals？，loader？，module？，name？，node？，output？，performance?。，插件，配置文件，recordsInputPath，records utputPath，recordsPath，resolve，resolveLoader，stats，target，watch，watchOptions？ }对于错别字：请更正它们。对于加载程序选项：webpack 2不再允许配置中的自定义属性。应该更新加载程序，以允许通过module.rules中的加载程序选项传递选项。在加载程序更新之前，可以使用LoaderOptionsPlugin将这些选项传递给加载程序：插件：[new webpack.LoaderOptionsPlugin（{//测试：/.xxx$/，//可能仅将此功能应用于某些模块选项：{postcss： ...}}）]-configuration.resolve具有未知属性'root'。这些属性是有效的：object {alias？，aliasFields？，cachePredicate？，descriptionFiles？，forceExtension？，forceforceModuleExtension ?、扩展名，fileSystem？，mainFields，mainFiles？，moduleExtensions？，modules？，plugins？，resolver？，symlinks ？，unsafeCache？，useSyncFileSystemCalls？ }-configuration.resolve.extensions [0]不能为空。

试图编辑Unexpected token '=' in React Component之类的.babelrc文件说

{
"presets": ["env", "react","stage-3"],
"plugins": ["transform-object-rest-spread", "transform-class-properties"]
}

但是它在我的浏览器控制台中显示了很多错误。 React.createElement是无效的类型，Element类型是无效的：期望一个字符串.. 去年，我放弃了学习React的工作，因为设置非常困难，我听不懂也不做任何事情。现在，这种愚蠢的反应使我再次疯狂...

是什么导致我的问题？我该如何解决？我应该卸载es2017并使用es2015吗？

reactJS模块构建失败

0 个答案: