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

user_498604 0
Viewed 3820

I am seeing @babel/plugin-proposal-class-properties as recommended alternative to using babel-preset-stage-0.

In my current react app, I use webpack.config.js instead of babel.rc or any thing else. I am left wondering how do I configure this @babel/plugin-proposal-class-properties plugin in webpack.config.js file. The documentation isn't talking about it and so I'm seeking the help from you.

Thanks in advance!

babeljs webpack reactjs
2 Answers

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

Your answer, Veli Šiška, helped me with a babel issue for which other replies always answered to configure .babelrc or the main.js of Nuxt.

In my case I use React with webpack.config.ts

So I copy it here in case it can help somebody else in my situation.

Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
        ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-property-in-object.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
        ["@babel/plugin-proposal-private-methods", { "loose": true }]

Thanks a lot!

user_27142850
Related