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
support for the experimental syntax 'exportdefaultfrom' isn't currently enabled
@babel/plugin-proposal-class-properties
support for the experimental syntax 'classproperties isn t currently enabled react-app rewired
support for the experimental syntax dynamicimport isn t currently enabled laravel mix
this experimental syntax requires enabling the parser plugin: 'classproperties'

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

Syntax error, I am trying to use webpack to create bundle.js file for my react-app but getting error:- Support for the experimental syntax 'classProperties' isn't  SyntaxError: nuxt/router.js: Support for the experimental syntax 'dynamicImport' isn't currently enabled

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

Support for the experimental syntax , 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  Dismiss Join GitHub today. GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.

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

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 , js): SyntaxError: C:\Users\1Sun\Cebula3\cebula_react\assets\js\index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (17:9): 15  I have problem with Mobx syntax. This is my first project with Mobx. I've got message: "Support for the experimental syntax 'decorators-legacy' isn't currently enabled"

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 , 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  I think we should open an issue there, because they say “Verify this doesn't break third-party code” — but it breaks ;-) And they don't have to compile imports, just allow the syntax.

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

Support for the experimental syntax 'classProperties' isn't - html, js): SyntaxError: C:\Users\1Sun\Cebula3\cebula_react\assets\js\index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (17:9):. 15  Dismiss Join GitHub today. GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.

Support for the experimental syntax 'classProperties' isn't , Syntax error: async-precious/node_modules/react-styleguidist/lib/rsg-​components/Editor/EditorLoader.js: Support for the experimental syntax '​dynamicImport'  Since the documentation: "babel-eslint allows you to lint ALL valid Babel code with the fantastic ESLint." In theory, a code that works with babel should work with "babel-eslint". I try to use 3 experimental plugins in my code: "@babel/p

[Solved]react styleguidist Support for the experimental syntax , js): SyntaxError: C:\Users\jwilliam\Cebula3\cebula_react\assets\js\index.js: Support for the experimental syntax 'classProperties' isn't currently  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.

Support for the experimental syntax 'classproperties' 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.