高阶组件装饰器:Support for the experimental syntax 'decorators-legacy' isn't currently enabled

  • 问题描述:
    基于类的组件使用高阶组件装饰器报错,SyntaxError: D:\workspace\test1\src\components\ReduxTest.js: Support for the experimental syntax 'decorators-legacy'
    isn't currently enabled (16:1):


  • 解决办法:
    (1)配置了按需加载:
    安装react-app-rewired取代react-scripts,可以扩展webpack的配置
    npm install react-app-rewired@2.0.2-next.0 babel-plugin-import --save
    (2)配置按需加载
  • 根目录下创建config-overrides.js

内容如下:

const { injectBabelPlugin } = require("react-app-rewired");
module.exports = function override(config, env) {
  config = injectBabelPlugin(
    // 在默认配置基础上注入
    // 插件名,插件配置
    ["import", { libraryName: "antd", libraryDirectory: "es", style: "css" }],
    config
  );

  config = injectBabelPlugin(
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    config
  );

  return config;
};

然后将package.json中scripts下的react-scripts改为eact-app-rewired,如下所示:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-app-rewired eject"
},

(3)安装高阶组件装饰器
npm install --save-dev babel-plugin-transform-decorators-legacy
注:我解决问题的步骤是这样的,有多余步骤未分析,先记录下,方便后边修改。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。