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

support for the experimental syntax 'decorators-legacy' isn't currently enabled
support for the experimental syntax 'classproperties' isn't currently enabled
parcel support for the experimental syntax 'classproperties' isn't currently enabled
@babel/plugin-proposal-class-properties
support for the experimental syntax 'exportdefaultfrom' isn't currently enabled
support for the experimental syntax dynamicimport isn t currently enabled laravel mix
this experimental syntax requires enabling the parser plugin: 'classproperties
babel/plugin-syntax-class-properties

I'm trying to build JS react project with decorators. My .babelrc looks like this:

{
  "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.

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.

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

Support for the experimental syntax 'classProperties' isn't , js): SyntaxError: C:\Users\1Sun\Cebula3\cebula_react\assets\js\index.js: Support for the experimental syntax 'classProperties' isn't currently  Syntax Error: SyntaxError: D:\xampp\htdocs\smart-school-v0.1\resources\js\components\Root.js: Support for the experimental syntax 'classProperties' isn't currently enabled (19:11): 17 | 18 | > 19 | state = { foo: false }; | ^ 20 | 21 | render() { 22 | Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

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

Compilation error "Support for the experimental syntax , Compilation error "Support for the experimental syntax 'classProperties' isn't currently enabled" despite having the plugin installed when using  Support for the experimental syntax 'decorators-legacy' isn't currently enabled #2053

If you face this error while using ReactJS with MobX,

Don't enable decorator syntax, but leverage the MobX built-in utility decorate 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();
  }
}

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

Support for the experimental syntax 'decorators-legacy' isn't currently , This is the error: Support for the experimental syntax 'decorators-legacy' isn't currently enabled. I saw this when setting up a new app using  Now.sh build breaking due to: Support for the experimental syntax 'decorators-legacy' isn't currently enabled. Expected: After adding decko (Support for decorators) as well as adding support for experimetalDecoractors in my tsconfig.js and using @babel/plugin-proposal-decorators in package.json.

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.

Support for the experimental syntax 'classProperties' isn't , js): SyntaxError: C:Users1SunCebula3cebula_reactassetsjsindex.js: Support for the experimental syntax 'classProperties' isn't currently enabled (  I'm trying to add react routing to my code. So I used BrowserRouter class App extends Component { render() { return ( <BrowserRouter>; &lt;div classNam

package.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"]

.babelrc

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

Support for the experimental syntax 'nullishCoalescingOperator' isn't , I'm trying to use ?? inside a vue component and I'm getting this error. Support for the experimental syntax 'nullishCoalescingOperator' isn't  Support for the experimental syntax 'dynamicImport' isn't currently enabled #987

@babel/plugin-syntax-decorators · Babel, Instead, use plugin-proposal-decorators to both parse and transform this syntax. Installation. npm install --save-dev @babel/plugin-syntax-decorators. Copy  Syntax Error: SyntaxError: D:\xampp\htdocs\smart-school-v0.1\resources\js\components\Root.js: Support for the experimental syntax 'classProperties' isn't currently enabled (19:11): 17 | 18 | > 19 | state = { foo: false }; | ^ 20 | 21 | render() { 22 | Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of

Support for the experimental syntax 'classProperties' isn't - html, Syntax error: async-precious/node_modules/react-styleguidist/lib/rsg-​components/Editor/EditorLoader.js: Support for the experimental syntax '​dynamicImport'  Hello Serge, thank you for answering. I have already checked the Power Save mode and it is not enabled. The highlighting level is also on the highest possible value, so that shouldn't be a problem.

[Solved]react styleguidist Support for the experimental syntax , node_modules/babel-loader/lib/index.js): SyntaxError: /Users/virs/clodraForumFE​/.nuxt/router.js: Support for the experimental syntax 'dynamicImport' isn't  Timer changed the title Support for the experimental syntax 'dynamicImport' isn't currently enabled Enable Babel syntax support for the dynamic import specification within `node_modules` such that webpack can handle the statements May 18, 2018

Comments
  • Have you solved the issue? The config looks good to me. I would debug what's going on based on the error stack trace.
  • 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)
  • 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).
  • @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"] }
  • restart the server. used only "@babel/plugin-proposal-decorators"
  • Hey would you mind taking a look at this similar issue? I'm using NextJS and Now.sh for deployments: stackoverflow.com/questions/54332378/…
  • 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, 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".
  • Does not work at all. Having both setup in packages.json and .babelrc changes nothing.
  • Did you try doing it in a babel.config.js? I was having issues doing it in a .babelrc @Janusz'Ivellios'Kamieński
  • 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.
  • This really helped me, Thanks!
  • I use react-app-rewired, and this solution works for me.
  • I don't even have webpack.config.js file. This answer does not work at all.