[compiler] Errors for eval(), with statments, class declarations (#33746)
* Error for `eval()` * More specific error message for `with (expr) { ... }` syntax * More specific error message for class declarations --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/33746). * #33752 * #33751 * #33750 * #33748 * #33747 * __->__ #33746
Joseph Savona committed
Jul 9, 2025 at 22:18 UTC
4a3ff8eed65f96cda7617150f92de3544d5ddf6a
4 files changed
+73
-4
compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
+44
-3
@@ -1355,13 +1355,45 @@ function lowerStatement(
1355
1356
return;
1357
}
1358
+ case 'WithStatement': {
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,
1363
+ loc: stmtPath.node.loc ?? null,
1364
+ suggestions: null,
1365
+ });
1366
+ lowerValueToTemporary(builder, {
1367
+ kind: 'UnsupportedNode',
1368
+ loc: stmtPath.node.loc ?? GeneratedSource,
1369
+ node: stmtPath.node,
1370
+ });
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
1377
+ */
1378
+ builder.errors.push({
1379
+ reason: `Support nested class declarations`,
1380
+ severity: ErrorSeverity.Todo,
1381
+ loc: stmtPath.node.loc ?? null,
1382
+ suggestions: null,
1383
+ });
1384
+ lowerValueToTemporary(builder, {
1385
+ kind: 'UnsupportedNode',
1386
+ loc: stmtPath.node.loc ?? GeneratedSource,
1387
+ node: stmtPath.node,
1388
+ });
1389
+ return;
1390
+ }
1391
case 'TypeAlias':
1392
case 'TSInterfaceDeclaration':
1393
case 'TSTypeAliasDeclaration': {
1394
// We do not preserve type annotations/syntax through transformation
1395
return;
1396
}
1364
- case 'ClassDeclaration':
1397
case 'DeclareClass':
1398
case 'DeclareExportAllDeclaration':
1399
case 'DeclareExportDeclaration':
@@ -1384,8 +1416,7 @@ function lowerStatement(
1416
case 'TSExportAssignment':
1417
case 'TSImportEqualsDeclaration':
1418
case 'TSModuleDeclaration':
1387
- case 'TSNamespaceExportDeclaration':
1388
- case 'WithStatement': {
1419
+ case 'TSNamespaceExportDeclaration': {
1420
builder.errors.push({
1421
reason: `(BuildHIR::lowerStatement) Handle ${stmtPath.type} statements`,
1422
severity: ErrorSeverity.Todo,
@@ -3502,6 +3533,16 @@ function lowerIdentifier(
3533
return place;
3534
}
3535
default: {
3536
+ if (binding.kind === 'Global' && binding.name === 'eval') {
3537
+ builder.errors.push({
3538
+ reason: `The 'eval' function is not supported`,
3539
+ description:
3540
+ 'Eval is an anti-pattern in JavaScript, and the code executed cannot be evaluated by React Compiler',
3541
+ severity: ErrorSeverity.InvalidJS,
3542
+ loc: exprPath.node.loc ?? null,
3543
+ suggestions: null,
3544
+ });
3545
+ }
3546
return lowerValueToTemporary(builder, {
3547
kind: 'LoadGlobal',
3548
binding,
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-eval-unsupported.expect.md
new
+24
@@ -0,0 +1,24 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+function Component(props) {
6
+ eval('props.x = true');
7
+ return <div />;
8
+}
9
+
10
+```
11
+
12
+
13
+## Error
14
+
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)
19
+ 3 | return <div />;
20
+ 4 | }
21
+ 5 |
22
+```
23
+
24
+
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-eval-unsupported.js
new
+4
@@ -0,0 +1,4 @@
1
+function Component(props) {
2
+ eval('props.x = true');
3
+ return <div />;
4
+}
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: (BuildHIR::lowerStatement) Handle ClassDeclaration statements (5:10)
87
+Todo: Support nested class declarations (5:10)
88
89
Todo: (BuildHIR::lowerStatement) Handle non-variable initialization in ForStatement (20:22)
90