[compiler] Emit better error for unsupported syntax `this` (#34322)
lauren committed
Aug 27, 2025 at 17:58 UTC
bd5b1b7639b818a3fbd33ce83bf022a6f9f27b55
2 files changed
+28
-3
compiler/packages/babel-plugin-react-compiler/src/HIR/HIRBuilder.ts
+16
@@ -323,6 +323,22 @@ export default class HIRBuilder {
323
],
324
});
325
}
326
+ if (node.name === 'this') {
327
+ CompilerError.throwDiagnostic({
328
+ severity: ErrorSeverity.UnsupportedJS,
329
+ category: ErrorCategory.UnsupportedSyntax,
330
+ reason: '`this` is not supported syntax',
331
+ description:
332
+ 'React Compiler does not support compiling functions that use `this`',
333
+ details: [
334
+ {
335
+ kind: 'error',
336
+ message: '`this` was used here',
337
+ loc: node.loc ?? GeneratedSource,
338
+ },
339
+ ],
340
+ });
341
+ }
342
const originalName = node.name;
343
let name = originalName;
344
let index = 0;
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ecma/error.reserved-words.expect.md
+12
-3
@@ -24,9 +24,18 @@ function useThing(fn) {
24
```
25
Found 1 error:
26
27
-Error: Expected a non-reserved identifier name
28
-
29
-`this` is a reserved word in JavaScript and cannot be used as an identifier name.
27
+Error: `this` is not supported syntax
28
+
29
+React Compiler does not support compiling functions that use `this`
30
+
31
+error.reserved-words.ts:8:28
32
+ 6 |
33
+ 7 | if (ref.current === null) {
34
+> 8 | ref.current = function (this: unknown, ...args) {
35
+ | ^^^^^^^^^^^^^ `this` was used here
36
+ 9 | return fnRef.current.call(this, ...args);
37
+ 10 | };
38
+ 11 | }
39
```
40
41
\ No newline at end of file