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.

Draff

Answer 1

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.

Draff

You don't need both. If you have a .babelrc you can ditch all of the params on your loader. – Notable

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. – Lowestoft

i am using browserify and using this oder "es2015", "react", "stage-0" worked for me. I put the config in the .babelrc. – Pepi

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 -_- – Perlie

@Lowestoft 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']}) – Brancusi

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. – Deductible

Answer 2

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

Fairlead

And with the new package, this is how the "plugins" section should look like: plugins: ['@babel/plugin-proposal-class-properties'] – Esperanto

this is already included in @babel/preset-env, so no need to install separately – Selfexecuting

do we need to create .babelrc or babel.config.js manually? – Bahamas

Answer 3

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

Suitable

if you are using @babel/preset-env then the package @babel/proposal-class-properties is already included – Selfexecuting

Answer 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.

Foetor

While working with WebComponents and the lit-element library that helped. – Lenhart

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/… – Miscue

Answer 5

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

Habitual

Answer 6

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

Soniferous

Answer 7

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

Mord

Answer 8

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

Byandby

Answer 9

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

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

Cassaba

Answer 10

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

Poison

Answer 11

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

Trug

Answer 12

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://mcmap.net/q/55054/-babel-7-referenceerror-regeneratorruntime-is-not-defined

Gametophore

Answer 13

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

Bea

How is this even related to the question asked? – Daltondaltonism

Answer 14

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

Sotos