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?
What is @babel/plugin-proposal-class-properties? This plugin transforms static class properties as well as properties declared with the property initializer syntax.
@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!
@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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With