Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 844
Vernon McRaspberry Avatar asked Nov 28 '18 23:11

Vernon McRaspberry


People also ask

What is Babel plugin proposal class properties?

What is @babel/plugin-proposal-class-properties? This plugin transforms static class properties as well as properties declared with the property initializer syntax.

What is Babel preset ENV?

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

What does Babel Register do?

@babel/register uses Node's require() hook system to compile files on the fly when they are loaded. While this is quite helpful overall, it means that there can be confusing cases where code within a require() hook causes more calls to require , causing a dependency cycle.

What is Babel plugin Istanbul?

A Babel plugin that instruments your code with Istanbul coverage. It can instantly be used with karma-coverage and mocha on Node. js (through nyc). Note: This plugin does not generate any report or save any data to any file; it only adds instrumenting code to your JavaScript source code.


1 Answers

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.

like image 165
Matthew Herbst Avatar answered Sep 26 '22 21:09

Matthew Herbst