[compiler] Use diagnostic for "found suppression" error (#33981)
Joseph Savona committed
Jul 24, 2025 at 15:54 UTC
129aa85e1621f31d382d3b8bf7a5aa456daf3d59
12 files changed
+40
-35
compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/compilationMode-all-output.txt
+1
-1
@@ -1,5 +1,5 @@
1
import { c as _c } from "react/compiler-runtime"; //
2
- @compilationMode:"all"
2
+@compilationMode:"all"
3
function nonReactFn() {
4
const $ = _c(1);
5
let t0;
compiler/apps/playground/components/Editor/Output.tsx
+3
-3
@@ -137,9 +137,9 @@ async function tabify(
137
} else {
138
language = 'markdown';
139
output = `
140
-# Output
140
+# Summary
141
142
-React Compiler compiled this function sucessfully, but there are lint errors that indicate potential issues with the original code.
142
+React Compiler compiled this function successfully, but there are lint errors that indicate potential issues with the original code.
143
144
## ${compilerOutput.errors.length} Lint Errors
145
@@ -181,7 +181,7 @@ ${code}
181
'Output',
182
<TextTabContent
183
output={errors}
184
- language="plaintext"
184
+ language="markdown"
185
diff={null}
186
showInfoPanel={false}></TextTabContent>,
187
);
compiler/apps/playground/components/Editor/monacoOptions.ts
+1
-1
@@ -28,5 +28,5 @@ export const monacoOptions: Partial<EditorProps['options']> = {
28
29
automaticLayout: true,
30
wordWrap: 'on',
31
- wrappingIndent: 'deepIndent',
31
+ wrappingIndent: 'same',
32
};
compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Suppression.ts
+9
-6
@@ -8,8 +8,8 @@
8
import {NodePath} from '@babel/core';
9
import * as t from '@babel/types';
10
import {
11
+ CompilerDiagnostic,
12
CompilerError,
12
- CompilerErrorDetail,
13
CompilerSuggestionOperation,
14
ErrorSeverity,
15
} from '../CompilerError';
@@ -181,12 +181,11 @@ export function suppressionsToCompilerError(
181
'Unhandled suppression source',
182
);
183
}
184
- error.pushErrorDetail(
185
- new CompilerErrorDetail({
186
- reason: `${reason}. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior`,
187
- description: suppressionRange.disableComment.value.trim(),
184
+ error.pushDiagnostic(
185
+ CompilerDiagnostic.create({
186
+ category: reason,
187
+ description: `React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression \`${suppressionRange.disableComment.value.trim()}\``,
188
severity: ErrorSeverity.InvalidReact,
189
- loc: suppressionRange.disableComment.loc ?? null,
189
suggestions: [
190
{
191
description: suggestion,
@@ -197,6 +196,10 @@ export function suppressionsToCompilerError(
196
op: CompilerSuggestionOperation.Remove,
197
},
198
],
199
+ }).withDetail({
200
+ kind: 'error',
201
+ loc: suppressionRange.disableComment.loc ?? null,
202
+ message: 'Found React rule suppression',
203
}),
204
);
205
}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-flow-suppression.expect.md
+3
-3
@@ -18,15 +18,15 @@ function Foo(props) {
18
```
19
Found 1 error:
20
21
-Error: React Compiler has skipped optimizing this component because one or more React rule violations were reported by Flow. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior
21
+Error: React Compiler has skipped optimizing this component because one or more React rule violations were reported by Flow
22
23
-$FlowFixMe[react-rule-hook].
23
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `$FlowFixMe[react-rule-hook]`
24
25
error.bailout-on-flow-suppression.ts:4:2
26
2 |
27
3 | function Foo(props) {
28
> 4 | // $FlowFixMe[react-rule-hook]
29
- | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React Compiler has skipped optimizing this component because one or more React rule violations were reported by Flow. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior
29
+ | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
30
5 | useX();
31
6 | return null;
32
7 | }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.expect.md
+6
-6
@@ -21,28 +21,28 @@ function lowercasecomponent() {
21
```
22
Found 2 errors:
23
24
-Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior
24
+Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
25
26
-eslint-disable my-app/react-rule.
26
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable my-app/react-rule`
27
28
error.bailout-on-suppression-of-custom-rule.ts:3:0
29
1 | // @eslintSuppressionRules:["my-app","react-rule"]
30
2 |
31
> 3 | /* eslint-disable my-app/react-rule */
32
- | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior
32
+ | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
33
4 | function lowercasecomponent() {
34
5 | 'use forget';
35
6 | const x = [];
36
37
-Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior
37
+Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
38
39
-eslint-disable-next-line my-app/react-rule.
39
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable-next-line my-app/react-rule`
40
41
error.bailout-on-suppression-of-custom-rule.ts:7:2
42
5 | 'use forget';
43
6 | const x = [];
44
> 7 | // eslint-disable-next-line my-app/react-rule
45
- | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior
45
+ | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
46
8 | return <div>{x}</div>;
47
9 | }
48
10 | /* eslint-enable my-app/react-rule */
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-sketchy-code-use-forget.expect.md
+6
-6
@@ -19,26 +19,26 @@ function lowercasecomponent() {
19
```
20
Found 2 errors:
21
22
-Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior
22
+Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
23
24
-eslint-disable react-hooks/rules-of-hooks.
24
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable react-hooks/rules-of-hooks`
25
26
error.invalid-sketchy-code-use-forget.ts:1:0
27
> 1 | /* eslint-disable react-hooks/rules-of-hooks */
28
- | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior
28
+ | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
29
2 | function lowercasecomponent() {
30
3 | 'use forget';
31
4 | const x = [];
32
33
-Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior
33
+Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
34
35
-eslint-disable-next-line react-hooks/rules-of-hooks.
35
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable-next-line react-hooks/rules-of-hooks`
36
37
error.invalid-sketchy-code-use-forget.ts:5:2
38
3 | 'use forget';
39
4 | const x = [];
40
> 5 | // eslint-disable-next-line react-hooks/rules-of-hooks
41
- | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior
41
+ | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
42
6 | return <div>{x}</div>;
43
7 | }
44
8 | /* eslint-enable react-hooks/rules-of-hooks */
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unclosed-eslint-suppression.expect.md
+3
-3
@@ -38,14 +38,14 @@ function CrimesAgainstReact() {
38
```
39
Found 1 error:
40
41
-Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior
41
+Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
42
43
-eslint-disable react-hooks/rules-of-hooks.
43
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable react-hooks/rules-of-hooks`
44
45
error.invalid-unclosed-eslint-suppression.ts:2:0
46
1 | // Note: Everything below this is sketchy
47
> 2 | /* eslint-disable react-hooks/rules-of-hooks */
48
- | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior
48
+ | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
49
3 | function lowercasecomponent() {
50
4 | 'use forget';
51
5 | const x = [];
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.sketchy-code-exhaustive-deps.expect.md
+3
-3
@@ -22,15 +22,15 @@ function Component() {
22
```
23
Found 1 error:
24
25
-Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior
25
+Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
26
27
-eslint-disable-next-line react-hooks/exhaustive-deps.
27
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable-next-line react-hooks/exhaustive-deps`
28
29
error.sketchy-code-exhaustive-deps.ts:6:7
30
4 | () => {
31
5 | item.push(1);
32
> 6 | }, // eslint-disable-next-line react-hooks/exhaustive-deps
33
- | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior
33
+ | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
34
7 | []
35
8 | );
36
9 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.sketchy-code-rules-of-hooks.expect.md
+3
-3
@@ -23,13 +23,13 @@ export const FIXTURE_ENTRYPOINT = {
23
```
24
Found 1 error:
25
26
-Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior
26
+Error: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
27
28
-eslint-disable react-hooks/rules-of-hooks.
28
+React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression `eslint-disable react-hooks/rules-of-hooks`
29
30
error.sketchy-code-rules-of-hooks.ts:1:0
31
> 1 | /* eslint-disable react-hooks/rules-of-hooks */
32
- | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior
32
+ | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Found React rule suppression
33
2 | function lowercasecomponent() {
34
3 | const x = [];
35
4 | return <div>{x}</div>;
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/error.wrong-index-no-func.expect.md
+1
@@ -16,6 +16,7 @@ function Component({foo}) {
16
17
```
18
Found 1 error:
19
+
20
Error: Cannot infer dependencies of this effect. This will break your build!
21
22
To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/error.wrong-index.expect.md
+1
@@ -23,6 +23,7 @@ function Component({foo}) {
23
24
```
25
Found 1 error:
26
+
27
Error: Cannot infer dependencies of this effect. This will break your build!
28
29
To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.