Create-react-app: Support for the experimental syntax 'decorators-legacy' isn't currently enabled

[astranavt]

My package.json

{
    "name": "upgrade",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "react": "^16.6.0",
        "react-dom": "^16.6.0",
        "react-scripts": "2.1.1"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
    ],
    "devDependencies": {
        "@babel/plugin-proposal-class-properties": "^7.1.0",
        "@babel/plugin-proposal-decorators": "^7.1.2"

    }
}

My .babelrc

{
    "presets": [
        "react-app", [
            "env",
            {
                "targets": {
                    "browsers": "> 2%"
                }
            }
        ]
    ],
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose" : true }],
        ["@babel/plugin-syntax-decorators"]
    ]
}

create-react-app version 2.1.1
How to turn on the decorators?

[Timer]

Hi! You don't need to configure babel (and actually cannot without ejecting).

Decorators are only supported if you're using TypeScript, you cannot use them with normal JS.
I suggest you don't try decorators because they're still a proposal going under change.

[AthosLui]

Hello.

I met the same problem. In create-react-app version 2.1.1.

My solution is deleteing node_modules, and then you need install node_modules.

next configuring . babelrc

{ "presets": [ "react-app" ], "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ] ] }
then you can use ES6 Decorator syntax.
Hope to help you.

[happystory]

Hello.

I met the same problem. In create-react-app version 2.1.1.

My solution is deleteing node_modules, and then you need install node_modules.

next configuring . babelrc

{ "presets": [ "react-app" ], "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ] ] }
then you can use ES6 Decorator syntax.
Hope to help you.

It doesn't work!

[mrmckeb]

@happystory, as @Timer mentioned above, this isn't supported right now. There are a few options - ejecting, or my preferred would be to create a fork of react-scripts.

You could also fork our Babel preset, and use that instead (Yarn lets you do this with resolutions).