babel: Odd 'loose' mode configuration must be the same...

'loose' mode configuration must be the same for both @babel/plugin-proposal-class-properties and @babel/plugin-proposal-private-methods

I’m getting this error even though I don’t use either of the proposals explicitly. Thus, it’s kinda hard for me to configure their loose modes 😆 I think they are brought in through a preset.

My config is:

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

I’ve recently done yarn upgrade and this error showed up. Summary of babel versions that got upgraded in yarn.lock:

7.9.6 → 7.10.0: core, runtime, compat-data, generator, helpers, parser, traverse, types, helper-compilation-targets, helper-create-class-features-plugin, helper-replace-supers, …
7.8.6 → 7.10.0: template
7.8.3 → 7.10.0: helper-member-expressions-to-function, plugin-transform-spread
7.9.0 → 7.10.0: plugin-transform-for-of
…

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 4
Comments: 21 (9 by maintainers)

Commits related to this issue

chore(deps): upgrade babel-preset-gatsby-package to 0.4.4 Fixes loose mode issues with Babel https://github.com/gatsbyjs/gatsby/pull/24640 https://github.com/babel/babel/issues/11622 — committed to baerrach/gatsby-remark-plantuml by baerrach 4 years ago

Most upvoted comments

I have the same problem with Storybook (v6.0.0-beta.15).

+41

danielbayerlein on May 27, 2020

After a lot of debugging, we found that simply adding the plugins (without options) seems to work.

plugins: [
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-private-methods',
    ],

We don’t use the plugins directly in our app but it seems they’re included in env. Without them listed in plugins it fails, listing them with loose: true also fails so I can only assume that the ‘default’ doesn’t trigger the warning

I’ll try and upload the lockfile with the business-sensitive bits removed later today

+15

charlieTheBotDev on Jun 4, 2020

In my case the problem was in mismatch between private fields and private methods loose property value.

we found that you need to manually add plugin and specify loose value for that plugin because loose property defined on the top configuration of preset-env can be ignored

More details on this PR https://github.com/babel/babel/pull/11634/files#diff-b307be8976e67ba330a71917a3322a94R1-R4

So config will look like the next one

presets: [
  ['@babel/preset-env', { loose: true }]
],
plugins: [
  ["@babel/plugin-proposal-class-properties", { "loose": true }]
]

or for storybook main.js in my case

config.module.rules[0].use[0].options.plugins[1] = [
      '@babel/plugin-proposal-class-properties',
      { loose: true }
    ]

havenchyk on Jun 15, 2020

We’re experiencing this failure on our Storybook build, but not our main Webpack build (and they use the same babel.config.js file). Ultimately the “fix” was deleting and recreating the yarn.lock.

JoshRobertson on Jun 9, 2020

TL;DR

concise work-around:

  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "loose": true,
          "shippedProposals": true
        }
      ]
    ]
  },

dimaqq on May 27, 2020

I’m looking for a wait to have my project set with "loose": false but while still allowing storybook to work.

morinted on Sep 30, 2020

Just leaving my insight here too. Working off of @JoshRobertson’s suggestion, i found all the packages that inadvertently depended on babel using yarn why (I had both direct dependencies and some larger packages like storybook and jest). I removed them then fresh installed them recreating the dependency graph only on these parts of the yarn.lock, rather than the whole thing.

In summary: yarn why @babel/core yarn remove @bable/core jest @storybook/react … etc yarn add @bable/core jest @storybook/react … etc

dairyisscary on Jun 11, 2020

@morinted "loose": false is the default and it should work if you upgrade all @babel/deps to latest versions. Please share a reproduction repo.

JLHwung on Sep 30, 2020

Ok, I think that the problem is that Parcel is bringing in @babel/preset-env, which is bringing in the private-methods plugin causing the bug tracked in this issue. You can’t reproduce it locally because your lockfile contains preset-env@7.9.0, but for some reasons Gitlab CI is ignoring the lockfile and downloading version 7.10.0.

You can workaround this Babel bug (until it’s fixed) by using npm ci instead of npm install on CI, so that it respects your lockfile.

how do you know the two plugins have been included by the reset nano-react-app?

https://github.com/nano-react-app/babel-preset-nano-react-app/blob/master/index.js

nicolo-ribaudo on May 28, 2020

This code works with 7.9 but not with 7.10:

const output = babel.transformSync("class A { x }", {
  configFile: false,
  presets: [[env, { shippedProposals: true }]],
  plugins: [[classProperties, { loose: true }]],
});

nicolo-ribaudo on May 27, 2020

CRA sets class properties to loose 😃

https://github.com/facebook/create-react-app/blob/master/packages/babel-preset-react-app/create.js#L151

existentialism on May 27, 2020