Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Syntax error - Support for the experimental syntax 'decorators-legacy' isn't currently enabled

Ask Question

Adding @babel/plugin-proposal-decorators problems appears again.

I am using babel 7, webpack 4 and 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
package.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? As it says in documentation this should fix my problem, but it still appears.
                Have you solved the issue? The config looks good to me. I would debug what's going on based on the error stack trace.
– nexuzzz
                Sep 18, 2018 at 3:57
                No :/ I was trying to update my project to babel 7, but i didn't manage to due to decorators. Problem is that I imported file with decorators, so I didn't have full control over that component. (I couldn't touch that component as other project used it - bad? - Yes)
– olga_babic
                Sep 18, 2018 at 15:00
                npm installing @babel/plugin-proposal-decorators and adding ["@babel/plugin-proposal-decorators", { "legacy": true }] to my webpack config in the babel plugins section was enough to solve it for me.  I wonder if your .bablerc is not being picked up somehow.  One difference is, I don't have a .baberc and all babel options are specified in my webpack (I used create-react-app and ejected).
– Brian Pursley
                Oct 4, 2018 at 19:14
                @bpursley 's solution worked for me as well. also ran npm run eject first and added the new plugin to "babel": { "plugins": [ <plugin here> ], "presets": ["react-app"] }
– Jona
                Oct 8, 2018 at 7:17
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.
The plugins section of .babelrc, for me, now looks like this:
"plugins": [
  ["@babel/plugin-proposal-decorators", { "legacy": true }]
                Hey would you mind taking a look at this similar issue? I'm using NextJS and Now.sh for deployments: stackoverflow.com/questions/54332378/…
– Leon Gaban
                Jan 23, 2019 at 17:50
                Is there a non-scoped package for plugin-proposal-decorators? I downgraded babel to babel 6 but I need this package to use mobx. All I can find is the scoped versions.
– wolfsbane
                Jul 25, 2019 at 8:23
                @wolfsbane, I don't think they have a non-scoped package for this, but I'm currently using plugin-proposal-decorators with mobx. The packages that I think are relevant look like this: "babel-core": "^6.26.3", "@babel/plugin-proposal-decorators": "^7.1.2", "mobx": "^5.5.1".
– Christopher Bradshaw
                Sep 30, 2019 at 16:23
                When I add that to the plugins, I get this compile error: ERROR in The "path" argument must be of type string. Received an instance of Array
– jzybert
                Jan 21, 2021 at 15:06
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:
const { override, addDecoratorsLegacy } = require('customize-cra');
module.exports = override(
 addDecoratorsLegacy()
Also, edit your package.jsonfile ：
"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. If you're still having issues refer to this. It helped me.
Example config for babel 7, in decorators legacy mode:
//.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
"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
Edit: updated config to show the non-beta configuration for babel 7
                Did you try doing it in a babel.config.js? I was having issues doing it in a .babelrc @Janusz'Ivellios'Kamieński
– Alex Cory
                Jun 4, 2019 at 0:03
                No, I didn't, because there was no clear explanation on how to do that. There are only some scraps laying around and no one gives complete example even. React itself is quite easy to start working with, but going to webpack/babel/node - oh boy, this is surrealistic what happens there for regular developer.  Anyway: I solved that simply by throwing out my previous configuration and setting up project with recent CRA and used libs. Luckily that worked in my case.
– Janusz 'Ivellios' Kamieński
                Jun 9, 2019 at 12:09
I fixed this with 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
Finally I needed to restart my webpack dev server.
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:
  ["@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.
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();
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
                I found this answer most useful! Also found more on the mobX site: mobx.js.org/best/decorators.html
– jjwallace
                Mar 9, 2020 at 21:14
                This is a workaround, not the actual solution to the problem. It's legitimate to choose not to use decorators, but if you decided you want to use decorator syntax in your code, you should set up the configuration to work with them, not give up up because the magical babel incantation necessary is too obscure.
– Aaron Greenwald
                Mar 31, 2020 at 6:09
                @wuliwong's answer to enable Babel to do its job is what we're after: stackoverflow.com/a/55985896/1181545
– hacklikecrack
                May 4, 2020 at 12:12
                Wohh... Thank you for your explanation. Really helpful. I wasted my 2 days for adapting observable in reactjs and after your answer I tested the scenario and it works.
– UGandhi
                Jun 9, 2022 at 21:00
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy" : true }],
    ["@babel/plugin-proposal-class-properties", { "loose" : true }],
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. 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:
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:
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:
  "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!
As of 2021, with Create React App 4.0, only the following steps are required.
Make sure you do not eject.
npm i --save-dev customize-cra react-app-rewired
Add config-overrides.js with:
const { addDecoratorsLegacy, override } = require('customize-cra')
module.exports = override(addDecoratorsLegacy())
Add babel.config.js with:
module.exports = {
  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
Open package.json / scripts section and search-replace 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.
"@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"]
.babelrc 
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  "plugins":  [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
As of 2021,if you've already “run Eject”,to edit the file called "babelTransform" under the path "/config/jest/BabelTransform",like this:
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.
    "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
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.