高階組件裝飾器: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,可以擴(kuò)展webpack的配置
    npm install react-app-rewired@2.0.2-next.0 babel-plugin-import --save
    (2)配置按需加載
  • 根目錄下創(chuàng)建config-overrides.js

內(nèi)容如下:

const { injectBabelPlugin } = require("react-app-rewired");
module.exports = function override(config, env) {
  config = injectBabelPlugin(
    // 在默認(rèn)配置基礎(chǔ)上注入
    // 插件名,插件配置
    ["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
注:我解決問題的步驟是這樣的,有多余步驟未分析,先記錄下,方便后邊修改。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容