语法错误 - 当前未启用对实验性语法“decorators-legacy”的支持

IT技术 javascript babeljs
2021-02-16 09:27:58

我正在尝试使用装饰器构建 JS react 项目。我的 .babelrc 看起来像这样：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",

  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-transform-object-assign",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

添加@babel/plugin-proposal-decorators 问题再次出现。

我正在使用 babel 7、webpack 4 和 react 16.5

webpack.config.js：

const path = require("path");
const webpack = require("webpack");
const componentName = "reports-desktop";
const publicFolderRelativePath = "../../../../../../public/js";
const ignorePlugin = new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/);

module.exports = {
    entry: './reports-desktop.js'
    ,
    output: {
        path: path.resolve(__dirname, publicFolderRelativePath),
        filename: `${componentName}.js`
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    },
    plugins: [
        ignorePlugin
    ]
};

包.json： 

{
  "name": "captain",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "webpack -w --mode development --progress --color --display-error-details",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-transform-object-assign": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-stage-1": "^7.0.0",
    "@babel/preset-stage-2": "^7.0.0",
    "babel-loader": "^8.0.2",
    "babel-plugin-transform-decorators": "^6.24.1",
    "react": "^16.5.0",
    "react-dom": "^16.5.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "redux": "^4.0.0",
    "webpack": "^4.17.3",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "dropzone": "^5.5.1",
    "lodash": "^4.17.10",
    "moment": "^2.22.2",
    "prop-types": "^15.6.2",
    "react-addons-update": "^15.6.2",
    "react-bootstrap": "^0.32.4",
    "react-datetime": "^2.15.0",
    "react-dnd": "^5.0.0",
    "react-dnd-html5-backend": "^5.0.1",
    "react-media": "^1.8.0",
    "react-tooltip": "^3.8.1"
  }
}

我可能使用@babel/plugin-proposal-decorators 错了吗？正如文档中所说，这应该可以解决我的问题，但它仍然出现。

6个回答

我遇到了同样的问题，但我能够通过运行npm install --save-dev @babel/plugin-proposal-decorators并添加["@babel/plugin-proposal-decorators", { "legacy": true }]到我的.babelrc.

.babelrc对我来说，插件部分现在看起来像这样：

"plugins": [
  ["@babel/plugin-proposal-decorators", { "legacy": true }]
]
当我将它添加到插件时，我收到此编译错误： ERROR in The "path" argument must be of type string. Received an instance of Array
2021-04-24 09:27:58
是否有用于插件提案装饰器的非作用域包？我将 babel 降级为 babel 6，但我需要这个包来使用 mobx。我能找到的只是范围版本。
2021-05-01 09:27:58
@wolfsbane，我不认为他们有一个非范围的包，但我目前正在使用plugin-proposal-decoratorsmobx。我认为相关的软件包如下所示："babel-core": "^6.26.3", "@babel/plugin-proposal-decorators": "^7.1.2", "mobx": "^5.5.1".
2021-05-07 09:27:58
重新启动服务器。仅使用 "@babel/plugin-proposal-decorators"
2021-05-14 09:27:58
嘿，你介意看看这个类似的问题吗？我正在使用 NextJS 和 Now.sh 进行部署：stackoverflow.com/questions/54332378/...
2021-05-15 09:27:58

首先，执行命令：

npm install customize-cra react-app-rewired @babel/plugin-proposal-decorators --save

config-overrides.js在项目根目录创建一个新文件，然后执行以下操作：

const { override, addDecoratorsLegacy } = require('customize-cra');
module.exports = override(
 addDecoratorsLegacy()
 );

另外，编辑你的package.json文件：

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

然后重新启动。

我使用 react-app-rewired，这个解决方案对我有用。
2021-04-17 09:27:58
提问者不使用 create-react-app，而且你告诉人们安装随机的东西，而不告诉他们为什么或它是什么。
2021-04-17 09:27:58
终于有一个有效的解决方案了！非常感谢你！
2021-04-30 09:27:58
这个解决方案在一个不使用 Babel 的项目中对我有用。
2021-05-07 09:27:58
它有效，你救了我。我被困了半天。谢谢
2021-05-11 09:27:58

取自mobxjs。如果您仍然遇到问题，请参阅此。它帮助了我。

babel 7 的示例配置，在装饰器遗留模式下：

//.babelrc

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ]
}

请注意插件顺序很重要，plugin-proposal-decorators 应该是你插件列表中的第一个插件

"devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.0",
    "@babel/preset-env": "^7.1.0"
}

非传统模式装饰器（第 2 阶段）正在进行中，请参阅 #1732

编辑：更新配置以显示 babel 7 的非测试版配置

不，我没有，因为没有关于如何做到这一点的明确解释。周围只有一些碎片，甚至没有人给出完整的例子。React 本身很容易开始使用，但是转到 webpack/babel/node - 哦，男孩，这对于普通开发人员来说是超现实的。无论如何：我只是通过丢弃我以前的配置并使用最近的 CRA 和使用的库设置项目来解决这个问题。幸运的是，这在我的情况下有效。
2021-04-19 09:27:58
你试过在 a 中做babel.config.js吗？我在.babelrc@Janusz'Ivellios'Kamieński 中遇到问题
2021-04-22 09:27:58
根本不起作用。设置packages.json并.babelrc更改任何内容。
2021-04-23 09:27:58

我用 yarn add @babel/plugin-proposal-decorators

然后我babel.config.js在该plugins部分添加了以下内容：

  [
    require('@babel/plugin-proposal-decorators').default,
    {
      legacy: true
    }
  ],

最后我需要重新启动我的 webpack 开发服务器。

我还没有测试过这个，但就像@christopher bradshaw 回答说的那样，根据 babel 网站，如果您.babelrc用于配置，则将以下内容添加到该"plugins"部分：

  ["@babel/plugin-proposal-decorators", { "legacy": true }]

如果您在将 ReactJS 与 MobX 一起使用时遇到此错误，请不要启用装饰器语法，而是利用 MobX 的内置装饰实用程序将装饰器应用于您的类/对象。

别： 

import { observable, computed, action } from "mobx";

class Timer {
  @observable start = Date.now();
  @observable current = Date.now();

  @computed
  get elapsedTime() {
    return this.current - this.start + "milliseconds";
  }

  @action
  tick() {
    this.current = Date.now();
  }
}

做：

import { observable, computed, action, decorate } from "mobx";

class Timer {
  start = Date.now();
  current = Date.now();

  get elapsedTime() {
    return this.current - this.start + "milliseconds";
  }

  tick() {
    this.current = Date.now();
  }
}
decorate(Timer, {
  start: observable,
  current: observable,
  elapsedTime: computed,
  tick: action
});
FIY，MobX 6 中的装饰已被移除
2021-04-21 09:27:58
这是一种解决方法，而不是问题的实际解决方案。选择不使用装饰器是合理的，但是如果你决定在你的代码中使用装饰器语法，你应该设置配置来使用它们，不要因为神奇的 babel 咒语太晦涩而放弃。
2021-04-24 09:27:58
我发现这个答案最有用！还可以在 mobX 站点上找到更多信息：mobx.js.org/best/decorators.html
2021-05-05 09:27:58
@wuliwong 使 Babel 能够完成其工作的答案是我们所追求的：stackoverflow.com/a/55985896/1181545
2021-05-06 09:27:58
其它你可能感兴趣的问题
上一篇如何编写 JavaScript 模式弹出窗口（替换 Ajax）？ 下一篇SecurityError：操作不安全 - window.history.pushState()