Babel loose setting

[dimaqq]

Having recently updated babel, I ran into the error:
'loose' mode configuration must be the same for both @babel/plugin-proposal-class-properties and @babel/plugin-proposal-private-methods

Good folks at babel/babel#11622 tracked it to create-react-app setting loose flag on class properties transform, while I've included shippedProposals into babel presets in my setup. I've never set anything to loose or "firm" explicitly.

The work-around, for me, was to add loose to preset flags.

I guess the question is:

• should this be documented?
• if someone tweaks babel settings, are they on their own and should eject?

[agriffis]

In the meantime, if anybody has a rescripts formula for working around this, that would be wonderful

[agriffis]

For storybook, this is fixed in v6.0.0-beta.16

[dimaqq]

In the meantime, if anybody has a rescripts formula for working around this, that would be wonderful

I'm using react-app-rewired and I've set up babel to pick up options from package.json:

    for (const rule of draft.module.rules) {
      if (rule.oneOf) {
        for (const one of rule.oneOf) {
          // If it quacks like a duck, it must be Babel
          if (one.options && one.options.presets) {
            one.options.babelrc = true;
          }
        }
      }
    }

(I'm not sure if that's necessary)

After which I can set loose to true right there where shippedProposals are set:

  "babel": {
    "plugins": ["babel-plugin-macros"],
    "presets": [
      ["@babel/preset-env",
        {
          "loose": true,
          "useBuiltIns": false,
          "shippedProposals": true,
          "debug": false
        }]]},

Then again, if someone includes shippedProposals explicitly, they can include loose setting explicitly too...

I'm planning to use config override to disable loose as I only target evergreen browsers and original loose justification is ~2 years old now... I'll have to test what impact it has first though.

[dimaqq]

Good news (for me).

When targeting only evergreen browsers, the loose settings has no effect on the produced code:

• file sizes match exactly
• file hash (in the names) match
• console warning, etc., match exactly.

(tested by changing the file in node_modules + package.json)

Thus, IMO, it's fine to recommend that users set loose: true with a doc explaining when that even matters.

[nicolo-ribaudo]

Note that we'll fix the error on the Babel side (however, this discussion still has value on its own).

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.