diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts index accecc91a29f8..d48398d3a6645 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts @@ -706,10 +706,18 @@ function tryCompileFunction( fn, ); if (suppressionsInFunction.length > 0) { - return { - kind: 'error', - error: suppressionsToCompilerError(suppressionsInFunction), - }; + if (!programContext.opts.noEmit) { + return { + kind: 'error', + error: suppressionsToCompilerError(suppressionsInFunction), + }; + } + /* ESLint mode: log suppression but continue analysis */ + logError( + suppressionsToCompilerError(suppressionsInFunction), + programContext, + fn.node.loc ?? null, + ); } try { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.eslint-mode-detects-incompatible-library-with-suppression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.eslint-mode-detects-incompatible-library-with-suppression.expect.md new file mode 100644 index 0000000000000..c985c4a45db29 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.eslint-mode-detects-incompatible-library-with-suppression.expect.md @@ -0,0 +1,46 @@ + +## Input + +```javascript +// @noEmit +import {useEffect} from 'react'; +import {useKnownIncompatible} from 'ReactCompilerKnownIncompatibleTest'; + +function MyHook() { + const data = useKnownIncompatible(); + + useEffect(() => { + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return data; +} + +export const FIXTURE_ENTRYPOINT = { + fn: MyHook, + params: [], +}; + +``` + + +## Error + +``` +Found 1 error: + +Compilation Skipped: Use of incompatible library + +This API returns functions which cannot be memoized without leading to stale UI. To prevent this, by default React Compiler will skip memoizing this component/hook. However, you may see issues if values from this API are passed to other components/hooks that are memoized. + +error.eslint-mode-detects-incompatible-library-with-suppression.ts:6:15 + 4 | + 5 | function MyHook() { +> 6 | const data = useKnownIncompatible(); + | ^^^^^^^^^^^^^^^^^^^^ useKnownIncompatible is known to be incompatible + 7 | + 8 | useEffect(() => { + 9 | // eslint-disable-next-line react-hooks/exhaustive-deps +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.eslint-mode-detects-incompatible-library-with-suppression.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.eslint-mode-detects-incompatible-library-with-suppression.js new file mode 100644 index 0000000000000..bdf98c876b4a6 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.eslint-mode-detects-incompatible-library-with-suppression.js @@ -0,0 +1,18 @@ +// @noEmit +import {useEffect} from 'react'; +import {useKnownIncompatible} from 'ReactCompilerKnownIncompatibleTest'; + +function MyHook() { + const data = useKnownIncompatible(); + + useEffect(() => { + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return data; +} + +export const FIXTURE_ENTRYPOINT = { + fn: MyHook, + params: [], +};