[英]react component module 'classProperties' isn't currently enabled
getting an error when executing my react module执行我的反应模块时出错
'classProperties' isn't currently enabled (44:11):
“classProperties”当前未启用 (44:11):
}
43 | // componentDidUpdate or try this
> 44 | onClick = (e) => {
| ^
45 | e.preventDefault();
46 | const url = `${this.props.url}`;
47 | if(this.props.method === "GET"){
Add @babel/plugin-proposal-class-properties ( https://git.io/vb4SL ) to the 'plugins' section of your Babel config to enable transformation.
将 @babel/plugin-proposal-class-properties ( https://git.io/vb4SL ) 添加到 Babel 配置的“插件”部分以启用转换。
I tried the solutions still get the error after re building.我尝试了重新构建后的解决方案仍然出现错误。
Support for the experimental syntax 'classProperties' isn't currently enabled 当前未启用对实验性语法“classProperties”的支持
package.json包.json
{
"name": "blahmodule",
"version": "1.0.0",
"description": "a fetch module for our project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "./node_modules/.bin/babel src --out-file index.js"
},
"peerDependencies": {
"react": "^16.6.6",
"react-dom": "^16.6.3",
"axios": "^0.19.0"
},
"author": "",
"license": "ISC",
"dependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"react": "^16.8.6",
"react-dom": "^16.8.6"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.4.4",
"axios": "^0.19.0"
}
}
.babelrc .babelrc
I tried changing the .babelrc
to babel.config.js
with module.exports, but still no success.我尝试使用
.babelrc
将babel.config.js
更改为.babelrc
,但仍然没有成功。 also with and without "loose": true
也有和没有
"loose": true
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
}
code from the beginning从一开始的代码
import React, {Component} from 'react';
import axios from 'axios';
class MyFetch extends Component {
constructor(props){
super(props);
this.state = {
data:[],
startTime:'',
responseTime:''
}
}
componentWillMount(){
.....
}
// componentDidUpdate or try this
onClick = (e) => {
e.preventDefault();
const url = `${this.props.url}`;
if(this.props.method === "GET"){
axios.get(url).then( res => {
this.setState({
data: res.data
})
console.log(this.state.data)
})
}
else if(this.props.method === "POST"){
axios.get(url).then( res => {
this.setState({
data: res.data
})
console.log(this.state.data)
})
}
}
render(){
return (
<div>
{this.props.url ? (
<button onClick={this.onClick}>Get Response Time</button>
):(
null
)}
{this.state.responseTime ? (
<h3>{this.state.responseTime}</h3>
):(
null
)}
</div>
);
}
}
export default MyFetch;
Fixed it by adding webpack
, i deleted .babelrc
because i included in webpack.config.js .通过添加
webpack
修复它,我删除了.babelrc
因为我包含在webpack.config.js 中。 Now i guess i have a reason to use webpack in my projects.现在我想我有理由在我的项目中使用 webpack。
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './'),
filename: 'index.js',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|bower_components|build)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/react'],
plugins:['@babel/plugin-proposal-class-properties']
}
}
}
]
},
externals: {
'react': 'commonjs react',
'reactDOM': 'react-dom'
},
};
For beginners, the best way to start working on React is to use create-react-app
to create a ready to go clean boilerplate.对于初学者来说,开始使用 React 的最佳方法是使用
create-react-app
创建一个随时可用的干净样板。 Have a look at the docs and don't waste time configuring things but focus on writing code for your app.查看文档,不要浪费时间配置东西,而是专注于为您的应用程序编写代码。
https://github.com/facebook/create-react-app#npm https://github.com/facebook/create-react-app#npm
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.