Error: Missing class properties transform

Question

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.

score 110 · Answer 1 · edited Oct 15 '21 at 10:43

110

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"],

edited Oct 15 '21 at 10:43

Luís Mestre

1,851
1
11
29

answered Mar 29 '18 at 10:16

neeraj-dixit27

2,812
2
15
6

6

And with the new package, this is how the "plugins" section should look like: `plugins: ['@babel/plugin-proposal-class-properties']` – Sebastian Jul 09 '20 at 13:26
2

this is already included in `@babel/preset-env`, so no need to install separately – vsync Nov 29 '22 at 16:28
do we need to create .babelrc or babel.config.js manually? – John Joe Jan 19 '23 at 09:52

speak · Accepted Answer · 2016-07-13T09:58:11.137

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.

edited Jul 13 '16 at 09:58

answered Feb 20 '16 at 00:08

speak

5,202
4
36
41

25

You don't need both. If you have a `.babelrc` you can ditch all of the params on your loader. – loganfsmyth Feb 20 '16 at 01: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 03 '16 at 01: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 04 '16 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 '16 at 03:22
@lenny.myr you need to install https://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 '16 at 15:21
I am using browserify and updated the order "es2015", "react", "stage-0" in .bablerc. Please make sure to have same order in package.json browersify.transform.presets OR for that matter it can be completely deleted if there is other transfrom required for browserify. – Vineet Kapoor Aug 27 '17 at 16:37

score 8 · Answer 3 · edited May 14 '20 at 08:09

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:

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

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

if you are using `@babel/preset-env` then the package `@babel/proposal-class-properties` is already included — vsync, Nov 29 '22 at 16:29

score 4 · Answer 4 · answered Jun 23 '20 at 16:35

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.

answered Jun 23 '20 at 16:35

vancy-pants

1,070
12
13

While working with WebComponents and the `lit-element` library that helped. – tonkatata Sep 03 '20 at 09: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 https://medium.com/@charpeni/arrow-functions-in-class-properties-might-not-be-as-great-as-we-think-3b3551c440b1 – BenHohner Nov 23 '20 at 17:11

Vanessa Ejikeme · Answer 5 · 2019-05-29T10:54:41.233

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

score 3 · Answer 6 · answered May 13 '19 at 06:54

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

score 2 · Answer 7 · answered Dec 04 '17 at 22:32

2

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

answered Dec 04 '17 at 22:32

Ben

54,723
49
178
224

score 2 · Answer 8 · answered Jan 30 '18 at 07:42

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

answered Jan 30 '18 at 07:42

Creem

141
2
5

score 0 · Answer 9 · answered Jun 20 '16 at 07:41

0

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

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

answered Jun 20 '16 at 07:41

Montage

29
2

score 0 · Answer 10 · answered Feb 08 '18 at 05:13

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

Muhammad Sulman · Answer 11 · 2018-12-13T06:25:21.340

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'
                    ]
                }
            ],
        }
});

score 0 · Answer 12 · answered Apr 29 '21 at 03:49

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

score -1 · Answer 13 · answered Dec 29 '22 at 12:00

-1

Complete working solution --

Use "react-pdf": "^5.7.2" version
import { Document, Page, pdfjs } from "react-pdf";
Also add this inside your functional component

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

answered Dec 29 '22 at 12:00

Jack

1

How is this even related to the question asked? – invinciblemuffi Feb 16 '23 at 05:41

score -1 · Answer 14 · edited Jun 14 '23 at 13:58

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

edited Jun 14 '23 at 13:58

eglease

2,445
11
18
28

answered Jun 13 '23 at 20:59

Vinicius Andrade

1

Error: Missing class properties transform

14 Answers14

Linked