[compiler] Add CompilerError.UnsupportedJS variant (#33750)
We use this variant for syntax we intentionally don't support: with statements, eval, and inline class declarations. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/33750). * #33753 * #33752 * #33751 * __->__ #33750 * #33748
Joseph Savona committed
Jul 9, 2025 at 22:24 UTC
96c61b7f1f145b9fe5103051b636959cdeb20cc8
4 files changed
+22
-11
compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts
+11
-2
@@ -15,6 +15,11 @@ export enum ErrorSeverity {
15
* misunderstanding on the user’s part.
16
*/
17
InvalidJS = 'InvalidJS',
18
+ /**
19
+ * JS syntax that is not supported and which we do not plan to support. Developers should
20
+ * rewrite to use supported forms.
21
+ */
22
+ UnsupportedJS = 'UnsupportedJS',
23
/**
24
* Code that breaks the rules of React.
25
*/
@@ -241,12 +246,16 @@ export class CompilerError extends Error {
246
case ErrorSeverity.InvalidJS:
247
case ErrorSeverity.InvalidReact:
248
case ErrorSeverity.InvalidConfig:
249
+ case ErrorSeverity.UnsupportedJS: {
250
return true;
251
+ }
252
case ErrorSeverity.CannotPreserveMemoization:
246
- case ErrorSeverity.Todo:
253
+ case ErrorSeverity.Todo: {
254
return false;
248
- default:
255
+ }
256
+ default: {
257
assertExhaustive(detail.severity, 'Unhandled error severity');
258
+ }
259
}
260
});
261
}
compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
+9
-7
@@ -1359,7 +1359,7 @@ function lowerStatement(
1359
builder.errors.push({
1360
reason: `JavaScript 'with' syntax is not supported`,
1361
description: `'with' syntax is considered deprecated and removed from JavaScript standards, consider alternatives`,
1362
- severity: ErrorSeverity.InvalidJS,
1362
+ severity: ErrorSeverity.UnsupportedJS,
1363
loc: stmtPath.node.loc ?? null,
1364
suggestions: null,
1365
});
@@ -1371,13 +1371,15 @@ function lowerStatement(
1371
return;
1372
}
1373
case 'ClassDeclaration': {
1374
- /*
1375
- * We can in theory support nested classes, similarly to functions where we track values
1376
- * captured by the class and consider mutations of the instances to mutate the class itself
1374
+ /**
1375
+ * In theory we could support inline class declarations, but this is rare enough in practice
1376
+ * and complex enough to support that we don't anticipate supporting anytime soon. Developers
1377
+ * are encouraged to lift classes out of component/hook declarations.
1378
*/
1379
builder.errors.push({
1379
- reason: `Support nested class declarations`,
1380
- severity: ErrorSeverity.Todo,
1380
+ reason: 'Inline `class` declarations are not supported',
1381
+ description: `Move class declarations outside of components/hooks`,
1382
+ severity: ErrorSeverity.UnsupportedJS,
1383
loc: stmtPath.node.loc ?? null,
1384
suggestions: null,
1385
});
@@ -3560,7 +3562,7 @@ function lowerIdentifier(
3562
reason: `The 'eval' function is not supported`,
3563
description:
3564
'Eval is an anti-pattern in JavaScript, and the code executed cannot be evaluated by React Compiler',
3563
- severity: ErrorSeverity.InvalidJS,
3565
+ severity: ErrorSeverity.UnsupportedJS,
3566
loc: exprPath.node.loc ?? null,
3567
suggestions: null,
3568
});
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-eval-unsupported.expect.md
+1
-1
@@ -15,7 +15,7 @@ function Component(props) {
15
```
16
1 | function Component(props) {
17
> 2 | eval('props.x = true');
18
- | ^^^^ InvalidJS: The 'eval' function is not supported. Eval is an anti-pattern in JavaScript, and the code executed cannot be evaluated by React Compiler (2:2)
18
+ | ^^^^ UnsupportedJS: The 'eval' function is not supported. Eval is an anti-pattern in JavaScript, and the code executed cannot be evaluated by React Compiler (2:2)
19
3 | return <div />;
20
4 | }
21
5 |
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-kitchensink.expect.md
+1
-1
@@ -84,7 +84,7 @@ let moduleLocal = false;
84
> 3 | var x = [];
85
| ^^^^^^^^^^^ Todo: (BuildHIR::lowerStatement) Handle var kinds in VariableDeclaration (3:3)
86
87
-Todo: Support nested class declarations (5:10)
87
+UnsupportedJS: Inline `class` declarations are not supported. Move class declarations outside of components/hooks (5:10)
88
89
Todo: (BuildHIR::lowerStatement) Handle non-variable initialization in ForStatement (20:22)
90