当前位置: 代码迷 >> 综合 >> React的mobx装饰器报错Support for the experimental syntax ‘decorators-legacy‘ isn‘t currently enabled
  详细解决方案

React的mobx装饰器报错Support for the experimental syntax ‘decorators-legacy‘ isn‘t currently enabled

热度:44   发布时间:2024-02-01 00:09:22.0

在初次使用React 的装饰器时,第一次在项目中使用 @ 会报错,截图为证
@报错

查了很多资料终于彻底解决,下面我将列出如何给装饰器打好前战!

  • 首先,安装插件
"devDependencies": {"@babel/core": "^7.10.5","@babel/plugin-proposal-decorators": "^7.10.5","@babel/preset-env": "^7.10.4","customize-cra": "^1.0.0","http-proxy-middleware": "^1.0.5","react-app-rewired": "^2.1.6"}
  • package.json 中修改scripts的运行属性值
"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-scripts eject"},
  • 在项目的根目录下新建一个config-overrides.js文件(文件名一定不要写错,因为会根据这个文件名进行编译代码)
// config-overrides.js 内容
const path = require('path')
const {override,addDecoratorsLegacy
} = require('customize-cra')function resolve(dir) {return path.join(__dirname, dir)
}const customize = () => (config, env) => {config.resolve.alias['@'] = resolve('src')if (env === 'production') {config.externals = {'react': 'React','react-dom': 'ReactDOM'}}return config
}module.exports = override(addDecoratorsLegacy(), customize())

基本完成上面这三步就可以正常使用装饰器了,再也不会报 @的错误了。同时Support for the experimental syntax 'decorators-legacy' isn't currently enabled这个错误也将消失。

  相关解决方案