How to configure @babel/plugin-proposal-class-properties in webpack.config.js?

Active3 hr before
Viewed126 times

10 Answers


I am seeing @babel/plugin-proposal-class-properties as recommended alternative to using babel-preset-stage-0., 1 use: { loader: 'babel-loader', options: { plugins: [ ['@babel/plugin-proposal-class-properties', { loose: true }] ] } } – ruoyan li Mar 26 '20 at 10:30 , How do I procedurally spread a number of circles across the sides of a bigger one?

You can pass options to the babel-loader by using the options property.

module: {
   rules: [{
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
         loader: 'babel-loader',
         options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-class-properties']

when I add @babel/plugin-proposal-class-properties in node_modules, .babelrc plugins no effect, same message shows,Check your .babelrc, it's @babel/plugin-proposal-class-properties, not @transform-class-properties,That means installing npm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties

   "presets": [
   "plugins": [
load more v

With a configuration file (Recommended),UsageWith a configuration file (Recommended)Via CLIVia Node API,Below is a class with four class properties which will be transformed.

Below is a class with four class properties which will be transformed.

class Bork {
   //Property initializer syntax
   instanceProperty = "bork";
   boundFunction = () => {
      return this.instanceProperty;

   //Static class properties
   static staticProperty = "babelIsCool";
   static staticFunction = function() {
      return Bork.staticProperty;

let myBork = new Bork();

//Property initializers are not on the prototype.
console.log(myBork.__proto__.boundFunction); // > undefined

//Bound functions are bound to the class instance.
console.log(; // > "bork"

//Static function exists on the class.
console.log(Bork.staticFunction()); // > "babelIsCool"
load more v

First, install the ExtReact webpack plugins from Sencha's NPM registry:,ExtReactWebpackPlugin's constructor accepts a configuration object with several settings. ,Static - A static method or property is a method or property belonging to the class itself, not an instance of the class

First, install the ExtReact webpack plugins from Sencha's NPM registry:

npm install--save - dev @sencha / ext - react - webpack - plugin
load more v

 Pretag team - issue, fix, solve, resolve

npm i @babel/plugin-proposal-class-properties,This plugin transforms static class properties as well as properties declared with the property initializer syntax,

npm install--save - dev @babel / plugin - proposal - class - properties
load more v

Within your webpack configuration object, you'll need to add the babel-loader to the list of modules, like so:,If you receive this message, it means that you have the npm package babel installed and are using the short notation of the loader in the webpack config (which is not valid anymore as of webpack 2.x):,webpack then tries to load the babel package instead of the babel-loader.

npm install - D babel - loader @babel / core @babel / preset - env webpack
load more v

Configure babel-loader using a new file called config-overrides.js:,To be able to import images and other assets using require, we need to configure file-loader. Let's install it:,Install react-app-rewired to override webpack configuration:

To install react-native-web, run:

yarn add react - native - web react - dom react - art
load more v

To add presets/plugins without configuring them, you can do it this way:,To add presets/plugins with custom configuration, do it on the next/babel preset like so:,Next.js includes the next/babel preset to your app, which includes everything needed to compile React applications and server-side code. But if you want to extend the default Babel configs, it's also possible.

Here's an example .babelrc file:

   "presets": ["next/babel"],
   "plugins": []
load more v

We also tell babel, the plugins that it should @babel/plugin-proposal-class-properties and @babel/plugin-syntax-dynamic-import,Add webpack.config.js file and add the configuration for the same,b- Create a configuration file for babel called .babelrc

Let's create a directory and run npm init --yes

mkdir projectnamecd projectname // Create package.json filenpm init --yes
load more v

Other "config-webpack" queries related to "How to configure @babel/plugin-proposal-class-properties in webpack.config.js?"