CODEWITHSUNDEEP
javascriptreactjsbabeljs
TheWizardJS
TheWizardJS

Reputation: 151

Babel configuration with decorators & class properties not working

I have a simple class which needs to be tested using Jest. The babel configuration for the project I am using -

Babel version - 7

{
  "plugins": [
    "@babel/plugin-transform-react-jsx",
    "@babel/plugin-proposal-function-bind",
    "@babel/plugin-transform-modules-commonjs",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-transform-classes",
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ],
  "presets": ["@babel/preset-env", "@babel/react"]
}

I am getting an error - 

  SyntaxError: Missing class properties transform.
  5 | 
       6 | export default class Template {
    >  7 |   id;

Upvotes: 1

Views: 1764

Answers (1)

TheWizardJS
TheWizardJS

Reputation: 151

So, I figured out the issue @babel/plugin-proposal-decorators should come before @babel/plugin-proposal-class-properties

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    ["@babel/plugin-transform-react-jsx"],
    "@babel/plugin-transform-modules-commonjs",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-function-bind",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-proposal-class-properties"
  ]
}

Upvotes: 2

Related Questions