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.

对我来说，.babelrc的插件部分现在看起来是这样的:

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

摘自 Mobxjs。如果你仍然有问题请参考 这个。它帮助了我。

Babel 7的示例配置，处于装饰器遗留模式:

//.babelrc


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

请注意，插件顺序是很重要的，插件提案装饰应该是你的插件列表中的第一个插件

"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

编辑: 更新配置，以显示 Babel7的非 beta 配置

包裹 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

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

。巴贝尔

{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins":  [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": 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.

不要:

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
});

首先，执行命令:

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"
},

然后重启。

我用 yarn add @babel/plugin-proposal-decorators修好了

Then I added the following to babel.config.js in the plugins section:

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

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

我还没有测试过这个，但是就像@Christopher Bradshaw 的回答所说的，根据 Babel 的网站，如果你使用 .babelrc进行配置，那么在 "plugins"部分添加以下内容:

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

我试着安装 babel-plugin-transform-inline-environment-variables，它起作用了。

npm install babel-plugin-transform-inline-environment-variables

不幸的是，上面提到的解决方案对我都不管用。因为他们需要你先运行 npm run eject我不想这么做。为了在运行时更改和覆盖 webpack 的配置，有一个名为 react-app-rewired的包，应该这样使用它:

首先安装所需的依赖项:

npm i --save-dev customize-cra react-app-rewired

然后添加一个名为 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()
);

最后，将 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"
},

现在像往常一样运行 npm start并享受它！

改名为 .babelrc到 babel.config.json和 成功了! ! ！

To use 莫布克斯 with 巴别塔 in 2020...

1

npm i babel-preset-mobx

2

module.exports = {
presets: ['other-presets', 'mobx'],
};

因此，只需安装 mobx预设并将其添加到 presets数组中的 babel 配置文件中。例如在 babel.config.js等。

到2021年，在 Create React App 4.0中，只需要执行以下步骤。

1. 确保你 do not eject。

2. npm i --save-dev customize-cra react-app-rewired

3. 将 config-overrides.js加入:

const { addDecoratorsLegacy, override } = require('customize-cra')


module.exports = override(addDecoratorsLegacy())

4. 将 babel.config.js加入:

module.exports = {
plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
}

5. 打开 package.json/script 部分并搜索-替换 react-scripts-> react-app-rewired。

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

在此之后，start、 build和 test命令都将使用代码库。

截至2021年，如果你已经“运行弹出”，在路径“/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,
});
...

成功了。

1. 在 package.json 中安装装饰器

"@babel/plugin-proposal-decorators": "^7.3.0",
"@babel/preset-flow": "^7.0.0"

2. update babe.config.js with this

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 }],
]
}