Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[compiler:eslint] avoid loading the user config when running Babel + BabelPluginReactCompiler #29229

Closed

Conversation

Ayc0
Copy link

@Ayc0 Ayc0 commented May 23, 2024

Summary

I was trying to use eslint-plugin-react-compiler in one of my repo, but it wasn't reporting any error. After digging a bit more, I added a console.log in the catch just after transformFromAstSync(babelAST, sourceCode, { and I saw this error:

Error: /path/to/test.tsx: 'loose' mode configuration must be the same for @babel/plugin-transform-class-properties, @babel/plugin-transform-private-methods and @babel/plugin-transform-private-property-in-object (when they are enabled).

If you already set the same 'loose' mode for these plugins in your config, it's possible that they are enabled multiple times with different options.
You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
        npx cross-env BABEL_SHOW_CONFIG_FOR=/path/to/test/test.tsx <your build command>
See https://babeljs.io/docs/configuration#print-effective-configs for more info.

And in my top level babel.config.js, I indeed have the plugin @babel/plugin-proposal-class-properties not setup with loose: true:
image

To confirm my suspicions, I created https://github.com/Ayc0/bug-react-eslint-compiler-babel in which I have a minimal reproduction of this bug:

When the babel.config.js doesn't have anything, it works:
image

But if it has root: true, it stops reporting errors:
image

Or if it has the plugin not set with loose: true:
image

How did you test this change?

babel.config.js

In the same repro, I edited my version of eslint-plugin-react-compiler present in my node_modules:

Before After
image image

.babelrc

After testing babel.config.js, I looked for .babelrc. In babel's config, you have both options https://babeljs.io/docs/options#babelrc. And indeed, if just configFile is disabled, but not .babelrc, it doesn't report any error when there is a .babelrc file (but does as soon as we add babelrc: false:

Before After
image image

To note

In one of their example on the babel website, when doing 2 passes of babel, they also disable those 2 options in the 2nd pass, see https://babeljs.io/docs/options#ast:

image

CI tests

I'd love to add a test in the repo itself, but as this seems to be related to the top-level babel.config.js or .babelrc, I didn’t know how to test that properly

Copy link

vercel bot commented May 23, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-compiler-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 23, 2024 7:52am

@react-sizebot
Copy link

react-sizebot commented May 23, 2024

Comparing: 4c2e457...6b6fffa

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 6.66 kB 6.66 kB = 1.82 kB 1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 495.89 kB 495.89 kB = 88.83 kB 88.83 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.67 kB 6.67 kB = 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 500.69 kB 500.69 kB = 89.51 kB 89.51 kB
facebook-www/ReactDOM-prod.classic.js = 593.05 kB 593.05 kB = 104.32 kB 104.32 kB
facebook-www/ReactDOM-prod.modern.js = 569.27 kB 569.27 kB = 100.72 kB 100.72 kB
test_utils/ReactAllWarnings.js Deleted 64.35 kB 0.00 kB Deleted 16.05 kB 0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
test_utils/ReactAllWarnings.js Deleted 64.35 kB 0.00 kB Deleted 16.05 kB 0.00 kB

Generated by 🚫 dangerJS against 6b6fffa

@poteto
Copy link
Member

poteto commented May 29, 2024

Thanks, closed in 9d530e9

@poteto poteto closed this May 29, 2024
@Ayc0 Ayc0 deleted the eslint-plugin-react-compiler-fix-babel-config branch May 29, 2024 06:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants