How do I install node module @babel/plugin-transform-class-properties?

Question

I have been following instructions from https://github.com/babel/babelify and I ran into an error along the way. I run the following line of code:

browserify script.js -o bundle.js -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] --plugins [ @babel/plugin-transform-class-properties ] ]

The terminal produces the following error message:

Error: Cannot find module '@babel/plugin-transform-class-properties' from '/path/to/file' while parsing file: /path/to/file/circle-graph-2.js

My package.json file is

{
  "name": "robert",
  "version": "1.0.0",
  "description": "This is the third step of my first attempt to learn canvas. I want to improve a piece a made a few weeks ago about the division of [occupations](http://nbremer.github.io/occupations/). The D3.js version has so many DOM elements due to all the small bar charts that it is very slow. Therefore, I hope that a canvas version might improve things",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "babel": {
    "presets": [
      "es2015",
      "react",
      "transform-class-properties"
    ]
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "babel-core": "^6.26.3",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^10.0.0"
  }
}

When I try the following line in the terminal then it says the package isn't found:

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

How do I overcome this error message?

Answer 1

Since you are on Babel 7 (based on your "@babel/core": "^7.1.6" entry), I think you are looking for npm install --save-dev @babel/plugin-proposal-class-properties which is the new version of the plugin for Babel 7. Notice the name change from "plugin-transform-class-properties" -> "babel-plugin-proposal-class-properties".

This was intentionally done by Babel to make people more aware of where features are in the TC39 process.

If you are actually still on Babel 6 (hard to tell since you have a Babel 7 and Babel 6 entry in your package.json , the comment by @Morty is what you need.

Answer 2

Had the same error for my project, but the npm install --save-dev @babel/plugin-proposal-class-properties install was not enough for me.

Searched for node-sass for babel 7.11.4 Found the fix here

I was basically in the wrong version so I added "@babel/core": "^7.13.14" to my package.json file and ran npm install again.

Answer 3

if you're using that latest version. Just run npx babel-upgrade and it will display changes you need to update in your babel.rc file