95

Error: Missing class properties transform

Test.js:

export class Test extends Component {
  constructor (props) {
    super(props)
  }

  static contextTypes = {
    router: React.PropTypes.object.isRequired
  }

.babelrc:

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["transform-class-properties"]
}

package.json:

"babel-core": "^6.5.1",
"babel-eslint": "^4.1.8",
"babel-loader": "^6.2.2",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.5.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.5.2",

I have scoured the web and all fixes revolve around: Upgrading to babel6, switching the order of "stage-0" to be after "es2015". All of which I have done.

14 Answers 14

111

You need to install @babel/plugin-proposal-class-properties:

npm install @babel/plugin-proposal-class-properties --save-dev

or

yarn add @babel/plugin-proposal-class-properties --dev

and add the following to your Babel configuration file - usually .babelrc or babel.config.js.

"plugins": ["@babel/plugin-proposal-class-properties"],
3
  • 6
    And with the new package, this is how the "plugins" section should look like: plugins: ['@babel/plugin-proposal-class-properties']
    – Sebastian
    Jul 9, 2020 at 13:26
  • 2
    this is already included in @babel/preset-env, so no need to install separately
    – vsync
    Nov 29, 2022 at 16:28
  • do we need to create .babelrc or babel.config.js manually?
    – John Joe
    Jan 19 at 9:52
65

OK, finally figured this out, in my webpack.config.js I had:

module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loaders: [
          'react-hot',
          'babel?presets[]=react,presets[]=es2015,presets[]=stage-0'
        ]
      }
    ]
  }

'babel?presets[]=stage-0,presets[]=react,presets[]=es2015'

Has to be treated in the same way as .babelrc, switched stage-0 to be after es2015 and it compiles perfectly.

6
  • 25
    You don't need both. If you have a .babelrc you can ditch all of the params on your loader. Feb 20, 2016 at 1:13
  • Did you simply solve your problem by adjusting your webpack.config.js? I'm facing the same problem but I'm using browserify and I can't get rid of it.
    – lenny.myr
    Jun 3, 2016 at 1:36
  • 2
    i am using browserify and using this oder "es2015", "react", "stage-0" worked for me. I put the config in the .babelrc.
    – lipp
    Jul 4, 2016 at 12:46
  • 1
    Hey @speak, great find. But i suggest you to write down the correct config in this answer because i was first changed to your wrong config -_-
    – YuC
    Jul 13, 2016 at 3:22
  • @lenny.myr you need to install babeljs.io/docs/plugins/preset-stage-0 if you are using browserify. And then on your gulp task update transform to .transform('babelify', {presets: ['es2015', 'react','stage-0']})
    – rex
    Oct 16, 2016 at 15:21
8

Just in case anybody is actually still facing the same issue, The following blog post did help me: https://devblogs.microsoft.com/typescript/typescript-and-babel-7/

In my case (babel 7.9.6, typescript 3.9.2, webpack 4.43.0) I had to do the following:

  1. Run the following command:

    npm install --save-dev @babel/preset-typescript @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread
    
  2. Create .babelrc file (yes, I didn't have one before and it did work just fine) with the following content:

    {
        "presets": [
            "@babel/env",
            "@babel/preset-typescript"
        ],
        "plugins": [
            "@babel/proposal-class-properties",
            "@babel/proposal-object-rest-spread"
        ]
    }
    
1
  • if you are using @babel/preset-env then the package @babel/proposal-class-properties is already included
    – vsync
    Nov 29, 2022 at 16:29
4

I ran into this issue when I put some arrow functions into one of my classes without thinking. Once I changed the arrow functions to regular function/method definitions the error was resolved.

2
  • While working with WebComponents and the lit-element library that helped.
    – tonkatata
    Sep 3, 2020 at 9:05
  • 1
    It might be worth considering this fix if you didn't intend to include arrow functions as class properties, as they have some significant downsides after transpiling to ES2017. See medium.com/@charpeni/…
    – BenHohner
    Nov 23, 2020 at 17:11
3

The fix in my case was defining 'transform-class-properties' plugin in the options attribute of my webpack.config.js, i'm using babel V6

 rules:[
    .....,
    {
       test: /\.(js|jsx)$/,
       exclude: /(node_modules|bower_components)/,
       loader: 'babel-loader',
       options: { plugins: ['transform-class-properties']}
    }
 ]
3

I had this same error and I ordered my plugins correctly in my .babelrc but it still persisted. Removing the preset parameters I defined in my webpack loader fixed it.

Former webpack config:

module: {
  rules: [
    {
      test: /.jsx?$/,
      loader: 'babel-loader',
      include: path.join(__dirname, 'src'),
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react']
      }
    }
  ]
}

Working webpack config:

module: {
  rules: [
    {
      test: /.jsx?$/,
      loader: 'babel-loader',
      include: path.join(__dirname, 'src'),
      exclude: /node_modules/
    }
  ]
}
0
2

I had this error because I was using stage-3 instead of stage-0.

2

I also meet this error because of the using of env presets: "presets": [ "react", "es2015", "stage-0", ["env", { "modules": false }]], and after I remove the env presets, it works well

0

@speak is right, but you need to change the order

loaders: [
  'react-hot',
  'babel?presets[]=react,presets[]=es2015,presets[]=stage-0'
]

0

I met the same problem using koa-react-view. Get inspired by these answers and finally fixed it with the following code in the koa server.js:

const register = require('babel-register');

register({
    presets: ['es2015', 'react', 'stage-0'],
    extensions: ['.jsx']
});

0

Finally discovered, To remove this error in Laravel-Mix project, add below code in webpack.mix.js

mix.webpackConfig({
        module: {
            rules: [
                {
                    test: /\.js?$/,
                    exclude: /(node_modules|bower_components)/,
                    loaders: [
                        'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0'
                    ]
                }
            ],
        }
});
0

If you are using Babel 7.4 or newer, @babel/pollify is deprecated.

Install core-js, regenerator-runtime, @babel/plugin-proposal-class-properties and babel-plugin-transform-class-properties packages.

yarn add core-js regenerator-runtime @babel/plugin-proposal-class-properties babel-plugin-transform-class-properties --dev
// or
npm install core-js regenerator-runtime @babel/plugin-proposal-class-properties babel-plugin-transform-class-properties --save-dev

Then, add to .babelrc or babel.config.js

"plugins": ["@babel/plugin-proposal-class-properties"],

Finally, add this lines in your main js file:

import "core-js/stable";
import "regenerator-runtime/runtime";

Taked from: https://stackoverflow.com/a/54490329/9481448

0
-1

Complete working solution --

  1. Use "react-pdf": "^5.7.2" version

  2. import { Document, Page, pdfjs } from "react-pdf";

  3. Also add this inside your functional component

useEffect(() => { pdfjs.GlobalWorkerOptions.workerSrc =https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js;});

1
  • How is this even related to the question asked? Feb 16 at 5:41
-1

If you're using create-react-app, you might add the babel specific configuration to your package.json:

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.