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

[dimaqq]

'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
• ...

[babel-bot]

Hey @dimaqq! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

[existentialism]

Both @babel/plugin-proposal-class-properties and @babel/plugin-proposal-private-methods are enabled via shippedProposals.

Are you sure you don't have another babel config (like a .babelrc file) that is enabling loose mode for class-properties?

[dimaqq]

I don't have another config... at least not anything I've written.
I am using CRA + config overrides, where I tell webpack(?) to look for babel config in package.json. I guess it's possible that CRA set some options somewhere...

I've tried:

• explicit "loose": false in "@babel/preset-env" options: does not help 👎
• explicit "loose": true in "@babel/preset-env" options: helps, I can build again 👍

I guess I'm stuck in loose mode now.
(not that it worries me, I've only learned about it today)

Would it help if I cut down my setup to a small-ish public repo?

[existentialism]

CRA sets class properties to loose :)

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

[danielbayerlein]

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

[dimaqq]

TL;DR

concise work-around:

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

[nicolo-ribaudo]

This is a breaking change.
If someone had one of those two plugins in loose mode and preset-env in non-loose mode (or the opposite), it breaks.

[nicolo-ribaudo]

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 }]],
});

[gandatandya]

@JLHwung, is this the same issue?
The weird thing I am seeing is that, it works on my local machine, but it shows the above error when I am running it in GitLab CI

I also don't have plugin-proposal-private-methods anywhere in package.json, so I am not sure which babel package depends on it.

Here is my package.json

"devDependencies": { "@babel/core": "^7.6.4", 
"@babel/plugin-proposal-class-properties": "^7.5.5", 
"@babel/plugin-transform-react-jsx": "^7.3.0", 
"@babel/plugin-transform-runtime": "^7.6.2", 
"@babel/runtime": "^7.6.3", 
"babel-preset-nano-react-app": "^0.1.0", 
"cssnano": "^4.1.10", "parcel-bundler": "^1.11.0", 
"parcel-plugin-clean-dist": "0.0.6" }, 
"babel": { "presets": [ "nano-react-app" ], 
"plugins": [ 
[ "@babel/plugin-proposal-class-properties", { "loose": true } ], 
[ "@babel/plugin-transform-react-jsx", { "pragmaFrag": "React.Fragment" } ]
]

Any clue what's going on here? why it works on local but not on GitLab CI?

Thanks,
Ganda

[nicolo-ribaudo]

transform-react-jsx and proposal-class-properties are already enabled by the preset you are using: you can safely remove them.

Could you share your lockfile (yarn.lock or package-lock.json) in a gist?

[gandatandya]

Attached is the package-lock.json
package-lock.txt

@nicolo-ribaudo how do you know the two plugins have been included by the reset nano-react-app?
the package json was first instantiated by Serverless framework.
This is the first time I am digging into issues with babel/parcel like this.

[nicolo-ribaudo]

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

[gandatandya]

@nicolo-ribaudo your suggestion works. Thanks for the help!

[charlieTheBotDev]

It seems this may have regressed between 7.10.1 and 7.10.2, seeing the same error with no change in config

Error

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

Attempted fixes

Tried suggested change (setting loose explicitly, both for @babel/env and the actual packages explicitly)

Versions with error

 "@babel/core": "7.10.2"
 "@babel/preset-env": "7.10.2"
 "@babel/preset-typescript": "7.10.2"

Workaround

Downgrade all three packages to 7.10.1

babel.config.js

module.exports = (api) => {
  api.cache(true);

  return {
    presets: [
      [
        '@babel/env',
        {
          targets: {
            browsers: 'Last 2 Chrome versions, Firefox ESR',
            node: '10',
          },
        },
      ],
      '@babel/preset-typescript',
    ],
    plugins: [
      'dynamic-import-node',
    ],
    env: {
      build: {
        ignore: [
          '**/*.test.tsx',
          '**/*.test.ts',
          '**/*.story.tsx',
          '__snapshots__',
          '__tests__',
          '__stories__',
        ],
      },
    },
    ignore: [
      'node_modules',
    ],
  };
};

Other notable dependencies

Error occurs when trying to build storybook

[nicolo-ribaudo]

Could you share your lockfile?

[charlieTheBotDev]

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

[JoshRobertson]

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.

[dairyisscary]

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

[havenchyk]

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

[morinted]

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

[JLHwung]

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