Update

[ghstack-poisoned]

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-logical-expression-instruction-scope.expect.md

@@ -24,8 +24,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime";
-/**
+import { c as _c } from "react/compiler-runtime"; /**
  * This is a weird case as data has type `BuiltInMixedReadonly`.
  * The only scoped value we currently infer in this program is the
  * PropertyLoad `data?.toString`.

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call-with-independently-memoizable-arg.expect.md

@@ -7,7 +7,7 @@ function Component(props) {
   const y = x(
     <div>
       <span>{props.text}</span>
-    </div>
+    </div>,
   );
   return y;
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-param-mutate.expect.md

@@ -30,7 +30,7 @@ function getNativeLogFunction(level) {
         INSPECTOR_LEVELS[logLevel],
         str,
         [].slice.call(arguments),
-        INSPECTOR_FRAMES_TO_SKIP
+        INSPECTOR_FRAMES_TO_SKIP,
       );
     }
     if (groupStack.length) {
@@ -76,7 +76,7 @@ function getNativeLogFunction(level) {
           INSPECTOR_LEVELS[logLevel],
           str,
           [].slice.call(arguments),
-          INSPECTOR_FRAMES_TO_SKIP
+          INSPECTOR_FRAMES_TO_SKIP,
         );
       }
       if (groupStack.length) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-member-expr-arguments.expect.md

@@ -7,7 +7,7 @@ function Foo(props) {
     (reason) => {
       log(props.router.location);
     },
-    [props.router.location]
+    [props.router.location],
   );
 
   return onFoo;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-call-evaluation-order.expect.md

@@ -12,7 +12,7 @@ function Component() {
   };
 
   (console.log("A"), x)[(console.log("B"), "f")](
-    (changeF(x), console.log("arg"), 1)
+    (changeF(x), console.log("arg"), 1),
   );
   return x;
 }
@@ -46,7 +46,7 @@ function Component() {
     x = { f: () => console.log("original") };
 
     (console.log("A"), x)[(console.log("B"), "f")](
-      (changeF(x), console.log("arg"), 1)
+      (changeF(x), console.log("arg"), 1),
     );
     $[1] = x;
   } else {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-break-labeled.expect.md

@@ -29,8 +29,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime";
-/**
+import { c as _c } from "react/compiler-runtime"; /**
  * props.b *does* influence `a`
  */
 function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-early-return.expect.md

@@ -66,8 +66,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime";
-/**
+import { c as _c } from "react/compiler-runtime"; /**
  * props.b does *not* influence `a`
  */
 function ComponentA(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.default-param-accesses-local.expect.md

@@ -6,7 +6,7 @@ function Component(
   x,
   y = () => {
     return x;
-  }
+  },
 ) {
   return y();
 }
@@ -28,7 +28,7 @@ export const FIXTURE_ENTRYPOINT = {
     |       ^^^^^^^
 > 4 |     return x;
     | ^^^^^^^^^^^^^
-> 5 |   }
+> 5 |   },
     | ^^^^ Todo: (BuildHIR::node.lowerReorderableExpression) Expression type `ArrowFunctionExpression` cannot be safely reordered (3:5)
   6 | ) {
   7 |   return y();

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.sketchy-code-exhaustive-deps.expect.md

@@ -8,7 +8,7 @@ function Component() {
     () => {
       item.push(1);
     }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [],
   );
 
   return <Button foo={foo} />;
@@ -24,7 +24,7 @@ function Component() {
   5 |       item.push(1);
 > 6 |     }, // eslint-disable-next-line react-hooks/exhaustive-deps
     |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: 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. eslint-disable-next-line react-hooks/exhaustive-deps (6:6)
-  7 |     []
+  7 |     [],
   8 |   );
   9 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-in-loop-with-context-variable-iterator.expect.md

@@ -14,7 +14,7 @@ function Component(props) {
     items.push(
       <div key={key} onClick={() => data.set(key)}>
         {key}
-      </div>
+      </div>,
     );
   }
   return <div>{items}</div>;
@@ -43,7 +43,7 @@ export const FIXTURE_ENTRYPOINT = {
      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 > 12 |         {key}
      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-> 13 |       </div>
+> 13 |       </div>,
      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 > 14 |     );
      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-of-loop-with-context-variable-iterator.expect.md

@@ -14,7 +14,7 @@ function Component(props) {
     items.push(
       <div key={item.id} onClick={() => data.set(item)}>
         {item.id}
-      </div>
+      </div>,
     );
   }
   return <div>{items}</div>;
@@ -43,7 +43,7 @@ export const FIXTURE_ENTRYPOINT = {
      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 > 12 |         {item.id}
      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-> 13 |       </div>
+> 13 |       </div>,
      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 > 14 |     );
      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-non-literal-depslist.expect.md

@@ -11,7 +11,7 @@ function App({ text, hasDeps }) {
     () => {
       return text.toUpperCase();
     },
-    hasDeps ? null : [text] // should be DCE'd
+    hasDeps ? null : [text], // should be DCE'd
   );
   return resolvedText;
 }
@@ -30,7 +30,7 @@ export const FIXTURE_ENTRYPOINT = {
 ```
    8 |       return text.toUpperCase();
    9 |     },
-> 10 |     hasDeps ? null : [text] // should be DCE'd
+> 10 |     hasDeps ? null : [text], // should be DCE'd
      |     ^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: Expected the dependency list for useMemo to be an array literal (10:10)
   11 |   );
   12 |   return resolvedText;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbs-params.expect.md

@@ -40,7 +40,7 @@ function Component(props) {
         title={fbs._(
           "Hello {user name}",
           [fbs._param("user name", props.name)],
-          { hk: "2zEDKF" }
+          { hk: "2zEDKF" },
         )}
       >
         Hover me

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-call-complex-param-value.expect.md

@@ -8,7 +8,7 @@ import { identity } from "shared-runtime";
 function Component(props) {
   const text = fbt(
     `Hello, ${fbt.param("(key) name", identity(props.name))}!`,
-    "(description) Greeting"
+    "(description) Greeting",
   );
   return <div>{text}</div>;
 }
@@ -34,7 +34,7 @@ function Component(props) {
     t0 = fbt._(
       "Hello, {(key) name}!",
       [fbt._param("(key) name", identity(props.name))],
-      { hk: "2sOsn5" }
+      { hk: "2sOsn5" },
     );
     $[0] = props.name;
     $[1] = t0;
@@ -61,4 +61,7 @@ export const FIXTURE_ENTRYPOINT = {
 ```
       
 ### Eval output
-(kind: ok) <div>Hello, Sathya!</div>
+(kind: exception) A React Element from an older version of React was rendered. This is not supported. It can happen if:
+- Multiple copies of the "react" package is used.
+- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
+- A compiler tries to "inline" JSX instead of using the runtime.

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-call.expect.md

@@ -7,7 +7,7 @@ import fbt from "fbt";
 function Component(props) {
   const text = fbt(
     `${fbt.param("(key) count", props.count)} items`,
-    "(description) Number of items"
+    "(description) Number of items",
   );
   return <div>{text}</div>;
 }
@@ -32,7 +32,7 @@ function Component(props) {
     t0 = fbt._(
       "{(key) count} items",
       [fbt._param("(key) count", props.count)],
-      { hk: "3yW91j" }
+      { hk: "3yW91j" },
     );
     $[0] = props.count;
     $[1] = t0;
@@ -59,4 +59,7 @@ export const FIXTURE_ENTRYPOINT = {
 ```
       
 ### Eval output
-(kind: ok) <div>2 items</div>
+(kind: exception) A React Element from an older version of React was rendered. This is not supported. It can happen if:
+- Multiple copies of the "react" package is used.
+- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
+- A compiler tries to "inline" JSX instead of using the runtime.

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-no-whitespace-btw-text-and-param.expect.md

@@ -35,7 +35,7 @@ function Component(t0) {
     t1 = fbt._(
       "Before text{paramName}After text",
       [fbt._param("paramName", value)],
-      { hk: "aKEGX" }
+      { hk: "aKEGX" },
     );
     $[0] = value;
     $[1] = t1;
@@ -53,4 +53,7 @@ export const FIXTURE_ENTRYPOINT = {
 ```
       
 ### Eval output
-(kind: ok) Before texthello worldAfter text
+(kind: exception) A React Element from an older version of React was rendered. This is not supported. It can happen if:
+- Multiple copies of the "react" package is used.
+- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
+- A compiler tries to "inline" JSX instead of using the runtime.

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-leading-whitespace.expect.md

@@ -56,10 +56,10 @@ function Component(props) {
             fbt._param(
               "option",
 
-              props.option
+              props.option,
             ),
           ],
-          { hk: "3Bg20a" }
+          { hk: "3Bg20a" },
         )}
         !
       </span>
@@ -91,11 +91,35 @@ export const FIXTURE_ENTRYPOINT = {
 ```
       
 ### Eval output
-(kind: ok) <span>42 votes for thing!</span>
-<span>42 votes for thing!</span>
-<span>1 vote for other!</span>
-<span>1 vote for other!</span>
-<span>42 votes for thing!</span>
-<span>1 vote for other!</span>
-<span>42 votes for thing!</span>
-<span>1 vote for other!</span>
+(kind: ok) [[ (exception in render) Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
+- Multiple copies of the "react" package is used.
+- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
+- A compiler tries to "inline" JSX instead of using the runtime. ]]
+[[ (exception in render) Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
+- Multiple copies of the "react" package is used.
+- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
+- A compiler tries to "inline" JSX instead of using the runtime. ]]
+[[ (exception in render) Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
+- Multiple copies of the "react" package is used.
+- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
+- A compiler tries to "inline" JSX instead of using the runtime. ]]
+[[ (exception in render) Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
+- Multiple copies of the "react" package is used.
+- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
+- A compiler tries to "inline" JSX instead of using the runtime. ]]
+[[ (exception in render) Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
+- Multiple copies of the "react" package is used.
+- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
+- A compiler tries to "inline" JSX instead of using the runtime. ]]
+[[ (exception in render) Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
+- Multiple copies of the "react" package is used.
+- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
+- A compiler tries to "inline" JSX instead of using the runtime. ]]
+[[ (exception in render) Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
+- Multiple copies of the "react" package is used.
+- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
+- A compiler tries to "inline" JSX instead of using the runtime. ]]
+[[ (exception in render) Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
+- Multiple copies of the "react" package is used.
+- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
+- A compiler tries to "inline" JSX instead of using the runtime. ]]

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-trailing-whitespace.expect.md

@@ -56,10 +56,10 @@ function Component(props) {
             fbt._param(
               "option",
 
-              props.option
+              props.option,
             ),
           ],
-          { hk: "3Bg20a" }
+          { hk: "3Bg20a" },
         )}
         !
       </span>
@@ -91,11 +91,35 @@ export const FIXTURE_ENTRYPOINT = {
 ```
       
 ### Eval output
-(kind: ok) <span>42 votes for thing!</span>
-<span>42 votes for thing!</span>
-<span>1 vote for other!</span>
-<span>1 vote for other!</span>
-<span>42 votes for thing!</span>
-<span>1 vote for other!</span>
-<span>42 votes for thing!</span>
-<span>1 vote for other!</span>
+(kind: ok) [[ (exception in render) Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
+- Multiple copies of the "react" package is used.
+- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
+- A compiler tries to "inline" JSX instead of using the runtime. ]]
+[[ (exception in render) Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
+- Multiple copies of the "react" package is used.
+- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
+- A compiler tries to "inline" JSX instead of using the runtime. ]]
+[[ (exception in render) Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
+- Multiple copies of the "react" package is used.
+- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
+- A compiler tries to "inline" JSX instead of using the runtime. ]]
+[[ (exception in render) Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
+- Multiple copies of the "react" package is used.
+- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
+- A compiler tries to "inline" JSX instead of using the runtime. ]]
+[[ (exception in render) Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
+- Multiple copies of the "react" package is used.
+- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
+- A compiler tries to "inline" JSX instead of using the runtime. ]]
+[[ (exception in render) Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
+- Multiple copies of the "react" package is used.
+- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
+- A compiler tries to "inline" JSX instead of using the runtime. ]]
+[[ (exception in render) Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
+- Multiple copies of the "react" package is used.
+- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
+- A compiler tries to "inline" JSX instead of using the runtime. ]]
+[[ (exception in render) Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
+- Multiple copies of the "react" package is used.
+- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
+- A compiler tries to "inline" JSX instead of using the runtime. ]]

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-params-complex-param-value.expect.md

@@ -27,7 +27,7 @@ function Component(props) {
     t0 = fbt._(
       "Hello {user name}",
       [fbt._param("user name", capitalize(props.name))],
-      { hk: "2zEDKF" }
+      { hk: "2zEDKF" },
     );
     $[0] = props.name;
     $[1] = t0;