[英]Syntax error - Support for the experimental syntax 'decorators-legacy' isn't currently enabled
I'm trying to build JS react project with decorators.我正在尝试使用装饰器构建 JS 反应项目。 My.babelrc looks like this:
我的 .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 }]
]
}
Adding @babel/plugin-proposal-decorators problems appears again.添加@babel/plugin-proposal-decorators 的问题又出现了。
I am using babel 7, webpack 4 and react 16.5我正在使用 babel 7、webpack 4 和 react 16.5
webpack.config.js: 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
]
};
package.json:包.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"
}
}
Am I maybe using @babel/plugin-proposal-decorators wrong?我可能用错了@babel/plugin-proposal-decorators 吗? As it says in documentation this should fix my problem, but it still appears.
正如文档中所说,这应该可以解决我的问题,但它仍然出现。
I had the same problem, but I was able to get it working by running npm install --save-dev @babel/plugin-proposal-decorators
and adding ["@babel/plugin-proposal-decorators", { "legacy": true }]
to the plugins section in my .babelrc
.我遇到了同样的问题,但我能够通过运行
npm install --save-dev @babel/plugin-proposal-decorators
并添加["@babel/plugin-proposal-decorators", { "legacy": true }]
到我的.babelrc
的插件部分。
The plugins section of .babelrc
, for me, now looks like this: .babelrc
的插件部分,对我来说,现在看起来像这样:
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }]
]
First, execute the command:首先,执行命令:
npm install customize-cra react-app-rewired @babel/plugin-proposal-decorators --save
Create a new file config-overrides.js
at project root and then execute the following:在项目根目录创建一个新文件
config-overrides.js
,然后执行以下命令:
const { override, addDecoratorsLegacy } = require('customize-cra');
module.exports = override(
addDecoratorsLegacy()
);
Also, edit your package.json
file :另外,编辑你的
package.json
文件:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
then restart.然后重新启动。
Taken from mobxjs .取自mobxjs 。 If you're still having issues refer to this .
如果您仍然遇到问题,请参阅此。 It helped me.
它帮助了我。
Example config for babel 7, in decorators legacy mode: babel 7 的示例配置,在装饰器遗留模式下:
//.babelrc
{
"presets": ["@babel/preset-env"],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}
Please note that plugin ordering is important, and plugin-proposal-decorators should be the first plugin in your plugin list请注意插件顺序很重要,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"
}
Non-legacy mode decorators (stage 2) is work in progress, see #1732非传统模式装饰器(第 2 阶段)正在进行中,请参阅 #1732
Edit: updated config to show the non-beta configuration for babel 7编辑:更新配置以显示 babel 7 的非测试版配置
I fixed this with yarn add @babel/plugin-proposal-decorators
我用
yarn add @babel/plugin-proposal-decorators
修复了这个问题
Then I added the following to babel.config.js
in the plugins
section:然后我在
plugins
部分的babel.config.js
中添加了以下内容:
[
require('@babel/plugin-proposal-decorators').default,
{
legacy: true
}
],
Finally I needed to restart my webpack dev server.最后我需要重新启动我的 webpack 开发服务器。
I haven't tested this but like @christopher bradshaw answers says and according to the babel website if you are using .babelrc
for configuration then add the following to the "plugins"
section:我还没有测试过这个,但就像@christopher bradshaw 回答说的那样,根据 babel 网站,如果你使用
.babelrc
进行配置,然后将以下内容添加到"plugins"
部分:
["@babel/plugin-proposal-decorators", { "legacy": true }]
If you face this error while using ReactJS with MobX, don't enable decorator syntax, but leverage the MobX's built-in decorate utility to apply decorators to your classes / objects.如果您在将 ReactJS 与 MobX 一起使用时遇到此错误,请不要启用装饰器语法,而是利用 MobX 的内置装饰实用程序将装饰器应用于您的类/对象。
Don't:别:
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();
}
}
Do:做:
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
});
Unfortunately none of the mentioned solutions worked for me.不幸的是,上述解决方案都不适用于我。 Because they need you to run
npm run eject
first and ... I don't want to do that.因为他们需要你先运行
npm run eject
并且......我不想那样做。 To change and override the webpack's configs at runtime, there's a package called react-app-rewired
and this is how it should be used:要在运行时更改和覆盖 webpack 的配置,有一个名为
react-app-rewired
rewired 的包,它应该是这样使用的:
First install the required dependencies:首先安装所需的依赖项:
npm i --save-dev customize-cra react-app-rewired
Then add a new file called config-overrides.js
to the root folder of the project with this content to enable legacy decorators babel plugin:然后将一个名为
config-overrides.js
的新文件添加到具有此内容的项目的根文件夹中,以启用遗留装饰器 babel 插件:
const {
override,
addDecoratorsLegacy,
disableEsLint
} = require("customize-cra");
module.exports = override(
// enable legacy decorators babel plugin
addDecoratorsLegacy(),
// disable eslint in webpack
disableEsLint()
);
Finally change the package.json
file to use react-app-rewired
:最后更改
package.json
文件以使用react-app-rewired
:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
Now run the npm start
as usual and enjoy it!现在像往常一样运行
npm start
并享受它!
package.json包.json
"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-decorators": "^7.1.0",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0",
"babel-loader": "^8.0.5"
webpack.config.js webpack.config.js
presets: ["@babel/preset-env", "@babel/preset-react"]
.babelrc .babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}
To use Mobx with Babel in 2020...在 2020 年将Mobx与Babel一起使用......
npm i babel-preset-mobx
module.exports = {
presets: ['other-presets', 'mobx'],
};
So, just install the mobx
preset and add it to your babel configuration file inside the presets
array.因此,只需安装
mobx
预设并将其添加到presets
数组内的 babel 配置文件中。 For example in a babel.config.js
etc.例如在
babel.config.js
等中。
As of 2021, with Create React App 4.0, only the following steps are required.截至 2021 年,使用 Create React App 4.0,只需执行以下步骤。
Make sure you do not eject .确保您没有弹出。
npm i --save-dev customize-cra react-app-rewired
Add config-overrides.js
with:添加
config-overrides.js
:
const { addDecoratorsLegacy, override } = require('customize-cra')
module.exports = override(addDecoratorsLegacy())
babel.config.js
with:babel.config.js
:module.exports = {
plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
}
package.json
/ scripts section and search-replace react-scripts
-> react-app-rewired
.package.json
/ scripts 部分并搜索替换react-scripts
-> react-app-rewired
。"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
}
After this, both start
, build
, and test
commands will work with the codebase.在此之后,
start
、 build
和test
命令都将与代码库一起使用。
我尝试安装babel-plugin-transform-inline-environment-variables
并且它起作用了。
npm install babel-plugin-transform-inline-environment-variables
更名.babelrc
到babel.config.json
和它的工作!
As of 2021,if you've already “run Eject”,to edit the file called "babelTransform" under the path "/config/jest/BabelTransform",like this:从 2021 年开始,如果您已经“运行 Eject”,请编辑路径“/config/jest/BabelTransform”下名为“babelTransform”的文件,如下所示:
...
module.exports = babelJest.createTransformer({
presets: [
[
require.resolve('babel-preset-react-app'),
{
runtime: hasJsxRuntime ? 'automatic' : 'classic',
},
],
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true,
}
]
],
babelrc: false,
configFile: false,
});
...
and it worked.它奏效了。
"@babel/plugin-proposal-decorators": "^7.3.0",
"@babel/preset-flow": "^7.0.0"
module.exports = {
"presets": [
"module:metro-react-native-babel-preset",
"@babel/preset-flow"
],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy" : true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }],
]
}
I followed this steps and it worked:我按照以下步骤操作并且有效:
1. 1.
npm i --save-dev customize-cra react-app-rewired @babel/plugin-proposal- decorators
const { addDecoratorsLegacy, override } = require('customize-cra') module.exports = override(addDecoratorsLegacy())
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" },
All credits go to this article: https://www.tderflinger.com/en/litelement-react-app所有学分都转到这篇文章: https ://www.tderflinger.com/en/litelement-react-app
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.