Babel preset warnings in v12.6.6

[ghost]

Current Behavior

Babel warns for:

> nx run docker-app:build:production 
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 }]
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-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 }]
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-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.

Expected Behavior

No warnings should be shown

Steps to Reproduce

• Create a repo with Nx@12.6.6 and a React app
• Build the app

[KeKs0r]

Actual Issue

As the error suggests, whenever ["@babel/plugin-proposal-class-properties", { "loose": true }], is used, also those two additional plugins need to be used:

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

Since depending on the config that line is added to the preset here: https://github.com/nrwl/nx/blob/master/packages/web/babel.ts#L81, we run into this issue.

How to solve it

In @nrwl/web/babel

If you are using the web preset you cann add the classProperties option yourself with loose: false

{
    "presets": [
        [
            "@nrwl/web/babel",
            {
                "classProperties": { "loose": false }
            }
        ]
    ]
}

In @nrwl/react/babel

Unfortunately the react babel preset, does not have an option to configure it, but it can be overwritten with this:

{
    "presets": ["@nrwl/react/babel"],
    "plugins": [["@babel/plugin-proposal-class-properties", { "loose": false }]]
}

Testing the issue is hard due to caching

When running builds or something, the babel-loader caches the configuration of .babelrc which makes testing different configurations hard. The warnings are only logged when the babel config file is evaluated, which does not happen in the case it was cached.

Disable Caching for .babelrc to test different babel configurations

In order to disable the caching I had to overwrite the webpack config, so at least it is easy to test different babel configurations.

module.exports = (config, context) => {
  console.log(
    'Disable babel loader caching to immediately get feedback on .babelrc changes'
  );

  config.module.rules.forEach((rule) => {
    if (rule.options && rule.options.cacheDirectory) {
      rule.options.cacheDirectory = false;
    }
  });
  return config;
};

[guiccbr]

Unfortunately that didn't do the job for me. I did override all of the .babel config files of my project to set loose: false for plugin-proposal-class-properties, but I was still seeing all of those warnings.

What seems to have done the job was the following instead:

  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
      ["@babel/plugin-proposal-class-properties", { "loose": true }],
      ["@babel/plugin-proposal-private-methods", { "loose": true }],
      ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],

 "presets": ["@nrwl/react/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 }],

on every single .babel file that I have.

[eddeee888]

Hi, since updating to NX@12.9, we are seeing lots of babel warnings in our app. The main reason is because we are using @nrwl/react/babel in one of our libs ( which uses the default @nrwl/web settings ) which is forcing loose=true for @babel/presets-env

Looks like the default for loose is false. Is there a reason for it to be true? Should this be false by default instead?

Ideally, we don't want to add overrides in all of our .babelrc.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.