反应组件模块“classProperties”当前未启用

Posted 2023-02-22

【中文标题】反应组件模块“classProperties”当前未启用

【英文标题】：react component module 'classProperties' isn't currently enabled

【发布时间】：2019-11-10 21:00:38

【问题描述】：

执行我的反应模块时出错

'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")

将@babel/plugin-proposal-class-properties (https://git.io/vb4SL) 添加到 Babel 配置的“插件”部分以启用转换。

我尝试了解决方案，重新构建后仍然出现错误。

Support for the experimental syntax 'classProperties' isn't currently enabled

package.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

我尝试使用 module.exports 将 .babelrc 更改为 babel.config.js，但仍然没有成功。也有和没有"loose": true

    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties",
          
            "loose": true
          
        ]
      ]
  

代码从头开始

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;

【参考方案1】：

通过添加webpack 修复它，我删除了.babelrc，因为我包含在webpack.config.js 中。现在我想我有理由在我的项目中使用 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'
  ,
;

【参考方案2】：

对于初学者来说，开始使用 React 的最佳方式是使用 create-react-app 创建一个准备好去干净的样板。查看文档，不要浪费时间进行配置，而是专注于为您的应用编写代码。

https://github.com/facebook/create-react-app#npm

【讨论】：

这没有提供解决方案。对不起。

此外，.babelrc 的问题是由create-react-app引起的，因为它们不支持外部 Babel 配置文件。