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-class-properties

[niedfelj]

I'm getting this warning over and over:

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-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-methods", { "loose": true }] to the "plugins" section of your Babel config.

[mcmire]

What version of Webpacker are you using (both Ruby gem and JavaScript package), and what is the content of your babel.config.js?

[dennyf]

Same issue here - just updated Webpacker to version 5.3.0 (from 5.2.1) and I'm getting this warning. Here is my babel.config.js:

module.exports = function(api) {
  var validEnv = ['development', 'test', 'production']
  var currentEnv = api.env()
  var isDevelopmentEnv = api.env('development')
  var isProductionEnv = api.env('production')
  var isTestEnv = api.env('test')

  if (!validEnv.includes(currentEnv)) {
    throw new Error(
      'Please specify a valid `NODE_ENV` or ' +
        '`BABEL_ENV` environment variables. Valid values are "development", ' +
        '"test", and "production". Instead, received: ' +
        JSON.stringify(currentEnv) +
        '.'
    )
  }

  return {
    presets: [
      isTestEnv && [
        '@babel/preset-env',
        {
          targets: {
            node: 'current'
          }
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        '@babel/preset-env',
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ]
    ].filter(Boolean),
    plugins: [
      'babel-plugin-macros',
      '@babel/plugin-syntax-dynamic-import',
      isTestEnv && 'babel-plugin-dynamic-import-node',
      '@babel/plugin-transform-destructuring',
      [
        '@babel/plugin-proposal-class-properties',
        {
          loose: true
        }
      ],
      [
        '@babel/plugin-proposal-object-rest-spread',
        {
          useBuiltIns: true
        }
      ],
      [
        '@babel/plugin-transform-runtime',
        {
          helpers: false,
          regenerator: true,
          corejs: false
        }
      ],
      [
        '@babel/plugin-transform-regenerator',
        {
          async: false
        }
      ]
    ].filter(Boolean)
  }
}

[Chwistophe]

Running webpacker 6.0.0-beta7 using webpack 5.36.2, this did the trick for me:

• yarn add "@babel/plugin-proposal-private-methods"
• declare it in the babel plugins section in package.json:

"babel": {
    "presets": [
      "./node_modules/@rails/webpacker/package/babel/preset.js"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-proposal-private-methods"
    ]
 }

You can then set the loose option on both directives keeping in mind they have to be the same.

[tagliala]

Hi,

I think I've found a way to replicate with a new webpacker installation

$ rails _6.1.3.2_ new test-babel-warning --skip-active-record --skip-javascript
$ cd test-babel-warning
$ echo "{ \"private\": true }" > package.json
$ echo "gem 'webpacker', '5.3.0'" >> Gemfile
$ bundle
$ bundle exec rails webpacker:install
$ echo "class Counter extends HTMLElement { #xValue = 0; }" >> app/javascript/packs/application.js
$ bin/webpack

(demo javascript taken from https://babeljs.io/docs/en/babel-plugin-proposal-private-methods)

Output:

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-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-methods", { "loose": true }]
to the "plugins" section of your Babel config.
Hash: 4e9d86a4e26c8c2229d9
Version: webpack 4.46.0
Time: 655ms
Built at: 05/10/2021 3:40:05 PM
                                     Asset       Size       Chunks                         Chunk Names
    js/application-fcea5ed095afa961aad5.js   8.71 KiB  application  [emitted] [immutable]  application
js/application-fcea5ed095afa961aad5.js.map   4.62 KiB  application  [emitted] [dev]        application
                             manifest.json  364 bytes               [emitted]              
Entrypoint application = js/application-fcea5ed095afa961aad5.js js/application-fcea5ed095afa961aad5.js.map
[./app/javascript/packs/application.js] 4.81 KiB {application} [built]

NOTE the warning will disappear after the second run of bin/webpack if the file does not change

Fix:

diff --git a/babel.config.js b/babel.config.js
index 4df1949..2fdd7d3 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -53,6 +53,12 @@ module.exports = function(api) {
           useBuiltIns: true
         }
       ],
+      [
+        '@babel/plugin-proposal-private-methods',
+        {
+          loose: true
+        }
+      ],
       [
         '@babel/plugin-transform-runtime',
         {

edit: not reproducible with Webpacker 6 beta 7

[pustovalov]

You can try this way:
config/webpack/environment.js

const { environment } = require('@rails/webpacker')
environment.loaders.delete('nodeModules')

Webpacker 6 doesn't have this issue because it no longer uses this loader
24fe1aa

Issue about this in babel rep:
babel/babel#13292 (comment)

[dorianmariecom]

I just did yarn add "@babel/plugin-proposal-private-methods" and the warnings disappeared

[tagliala]

Hi @dorianmariefr , I cannot confirm that adding that package makes the warning disappear.

I've tried with the reduced test case at #3016, by running yarn add "@babel/plugin-proposal-private-methods" before the last step:

$ yarn add "@babel/plugin-proposal-private-methods"
yarn add v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "@babel/plugin-proposal-private-methods > @babel/helper-create-class-features-plugin@7.14.3" has unmet peer dependency "@babel/core@^7.0.0".
warning " > @babel/plugin-proposal-private-methods@7.13.0" has unmet peer dependency "@babel/core@^7.0.0-0".
[4/4] 🔨  Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ @babel/plugin-proposal-private-methods@7.13.0
info All dependencies
└─ @babel/plugin-proposal-private-methods@7.13.0
✨  Done in 2.53s.
someone at somewhere in ~/test-babel-warning on master [?]
$ bin/webpack
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-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-methods", { "loose": true }]
to the "plugins" section of your Babel config.

This warning is not always displayed, I think it is only displayed the first time a class with a private variable is going to be compiled. You can just try to run bin/webpack twice and the second time it disappears

[LucasNeevs]

I did it to solve this error:

1º - My babelrc:

"plugins": [
    "babel-plugin-styled-components",
    ["@babel/plugin-proposal-private-methods", { "loose": true }]
]

2º - I've installed this:
npm install --save-dev @babel/plugin-proposal-private-methods

My scenario: "webpack": "^4.46.0", "react": "^16.14.0", "@storybook/react": "^6.2.9".

[devzom]

If You're looking how to fix is easly in Nuxt.js, check this > issue fix

[mtm-zarnikoko]

Try add these in nuxt.config.js:

build: {
  babel:{
    plugins: [
      ["@babel/plugin-proposal-class-properties", { "loose": true }],
      ["@babel/plugin-proposal-private-methods", { "loose": true }],
      ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
    ]
  }  
}

[ajaykaju]

Adding ['@babel/plugin-proposal-private-property-in-object', { loose: true }] in build of nuxt.config.js solved my issue for Nuxt @ v2.15.7

build: {
  babel: {
    plugins: [
      ['@babel/plugin-proposal-private-property-in-object', { loose: true }]
    ],
  },
}

[AlecRust]

What about for Webpacker 5.x? Will there be no release which fixes this?

[adamransom]

I fixed this in Webpacker 5.4 by using adding the following assumptions (mentioned in the Babel docs) to my babel.config.js and removing the individual loose: true statements we had:

assumptions: {
  privateFieldsAsProperties: true,
},

which is a slightly cleaner and more "modern" version (if you are on Babel 7.13+) of what @htetaung7 proposed.

(This is assuming you do want private fields to be treated loosely.)

[dhh]

Fixed in 5.4.2 for new installations.

[Nowaker]

bundle update webpacker for old installations.

[tomprats]

I was still running into this on webpacker 6.0.0-rc.5 with a babel.config.js file with an additional plugin, but adding the fix someone mentioned above and installing them as dependencies seems to have fixed the issue.

Before

module.exports = {
  plugins: [
    "@babel/plugin-proposal-export-default-from"
  ],
  presets: [
    "./node_modules/@rails/webpacker/package/babel/preset.js"
  ]
}

After

module.exports = {
  plugins: [
    "@babel/plugin-proposal-export-default-from",
    // Fixes for loose issue from https://github.com/rails/webpacker/issues/3008
    ["@babel/plugin-proposal-class-properties", {loose: true}],
    ["@babel/plugin-proposal-private-methods", {loose: true}],
    ["@babel/plugin-proposal-private-property-in-object", {loose: true}]
  ],
  presets: [
    "./node_modules/@rails/webpacker/package/babel/preset.js"
  ]
}

Plus

yarn add ...

[tbcooney]

Fixed in 5.4.2 for new installations.

This issue is back for Hotwire 1.0 (Stimulus 3 + Turbo 7).

[Diboby]

Hello !

Add loose: true here 👇 in my babel.config.js resolves that problem for me 😀

[sivaraj-v]

["@babel/plugin-proposal-class-properties", {loose: true}],
["@babel/plugin-proposal-private-methods", {loose: true}],
["@babel/plugin-proposal-private-property-in-object", {loose: true}]

Fixed @tomprats

[syedalimohsin]

@sivaraj-v thanks it is working for me.
Can you tell me what should I provide here in the host? Actually, I want to deploy Mozilla hub on Virtual Machine.