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

[Mrtenz]

Using this plugin with Babel as transpiler results in the following error:

  Error: [gatsby-plugin-ts-config] An error occurred while reading your gatsby-config!
  /.gatsby/gatsby-config.ts: 'loose' mode configuration must be the same for both @babel/plugin-proposal-class-properties and @babel/plugin-proposal-private-methods

I'm not using a custom Babel config, so I'm assuming this is an issue with this plugin. Setting babel to false and tsNode to true resolves it, but I'd like to use Babel if possible.

[Js-Brecht]

Are you able to share your project @Mrtenz?

[Mrtenz]

Here's a minimal repo where I'm able to reproduce:
https://github.com/Mrtenz/gatsby-plugin-ts-config-test

Simply running gatsby build or gatsby develop will trigger the error.

[Js-Brecht]

I use the same preset that Gatsby uses to transpile their own files, with an absolute runtime path injected for @babel/plugin-transform-runtime for yarn2 compatibility. The only reason I can think of that it may be throwing that error is because @babel/preset-env has loose: true, but @babel/plugin-proposal-class-properties doesn't.

AFAIK, @babel/preset-env will already load up @babel/plugin-proposal-class-properties AND @babel/plugin-proposal-private-methods, with a uniform set of options. My guess is that the inclusion of @babel/plugin-proposal-class-properties in the preset overrides what @babel/preset-env is doing, so it throws that error.

What I don't understand is why it is throwing now, because it's been like that for a while, and running successfully. Maybe babel changed the way they process those options at some point recently.

I will take a look and see what I can come up with.

[Mrtenz]

This may be related: babel/babel#11622

[Js-Brecht]

The only reason I can think of that it may be throwing that error is because @babel/preset-env has loose: true, but @babel/plugin-proposal-class-properties doesn't.

That's exactly why. As soon as I add that option to @babel/plugin-proposal-class-properties in babel-preset-gatsby-package, the error goes away. I will submit a PR to Gatsby to fix the error... still pretty strange that it started breaking all of a sudden.

[Js-Brecht]

This is what's new; merged in 13 hours ago. Pretty sure that's what caused it to start breaking.. they added some options constraints between a few plugins, those two included.

The semver for @babel/preset-env in babel-preset-gatsby-package is causing the latest version to be pulled, so you could add a resolution for @babel/preset-env to an earlier version as a workaround for now.

[Js-Brecht]

PR is opened gatsbyjs/gatsby#24640

[Js-Brecht]

Thanks for bringing that to my attention, by the way 🙏

[ghost]

Adding a selective dependency resolution for @babel/preset-env and pinning the dependency to a babel fix piror to the one introducing the code change described and linked 9 days ago does not address the issue. So it's unlikely the babel code change described is what's causing the issue.

[Js-Brecht]

This works for me:

  "resolutions": {
    "@babel/helper-create-class-features-plugin": "7.9.6"
  }

[Js-Brecht]

Can you guys please try gatsby-plugin-ts-config@0.2.3-pre.1?

[Mrtenz]

gatsby-plugin-ts-config@0.2.3-pre.1 works for me with babel: true 👍

[Js-Brecht]

v0.2.3 is published 🚀