Revert "fix compiler errors (#7989)"

src/content/learn/describing-the-ui.md

@@ -474,7 +474,7 @@ By strictly only writing your components as pure functions, you can avoid an ent
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [5]}}
+```js
 let guest = 0;
 
 function Cup() {

src/content/learn/escape-hatches.md

@@ -201,7 +201,7 @@ There are two common cases in which you don't need Effects:
 
 For example, you don't need an Effect to adjust some state based on other state:
 
-```js {expectedErrors: {'react-compiler': [8]}} {5-9}
+```js {5-9}
 function Form() {
   const [firstName, setFirstName] = useState('Taylor');
   const [lastName, setLastName] = useState('Swift');

src/content/learn/keeping-components-pure.md

@@ -93,7 +93,7 @@ Here is a component that breaks this rule:
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [5]}}
+```js
 let guest = 0;
 
 function Cup() {
@@ -380,7 +380,7 @@ The buggy code is in `Profile.js`. Make sure you read it all from top to bottom!
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [7]}} src/Profile.js
+```js src/Profile.js
 import Panel from './Panel.js';
 import { getImageUrl } from './utils.js';
 
@@ -602,7 +602,7 @@ export default function StoryTray({ stories }) {
 }
 ```
 
-```js {expectedErrors: {'react-compiler': [16]}} src/App.js hidden
+```js src/App.js hidden
 import { useState, useEffect } from 'react';
 import StoryTray from './StoryTray.js';
 
@@ -698,7 +698,7 @@ export default function StoryTray({ stories }) {
 }
 ```
 
-```js {expectedErrors: {'react-compiler': [16]}} src/App.js hidden
+```js src/App.js hidden
 import { useState, useEffect } from 'react';
 import StoryTray from './StoryTray.js';
 
@@ -790,7 +790,7 @@ export default function StoryTray({ stories }) {
 }
 ```
 
-```js {expectedErrors: {'react-compiler': [16]}} src/App.js hidden
+```js src/App.js hidden
 import { useState, useEffect } from 'react';
 import StoryTray from './StoryTray.js';
 

src/content/learn/lifecycle-of-reactive-effects.md

@@ -1131,7 +1131,7 @@ If you see a linter rule being suppressed, remove the suppression! That's where
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [16]}}
+```js
 import { useState, useEffect } from 'react';
 
 export default function App() {
@@ -1374,7 +1374,7 @@ export default function App() {
 }
 ```
 
-```js {expectedErrors: {'react-compiler': [8]}} src/ChatRoom.js active
+```js src/ChatRoom.js active
 import { useState, useEffect } from 'react';
 
 export default function ChatRoom({ roomId, createConnection }) {

src/content/learn/preserving-and-resetting-state.md

@@ -704,7 +704,7 @@ Here, the `MyTextField` component function is defined *inside* `MyComponent`:
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [7]}}
+```js
 import { useState } from 'react';
 
 export default function MyComponent() {

src/content/learn/react-compiler/introduction.md

@@ -28,7 +28,7 @@ React Compiler automatically optimizes your React application at build time. Rea
 
 Without the compiler, you need to manually memoize components and values to optimize re-renders:
 
-```js {expectedErrors: {'react-compiler': [4]}}
+```js
 import { useMemo, useCallback, memo } from 'react';
 
 const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) {

src/content/learn/referencing-values-with-refs.md

@@ -211,7 +211,7 @@ If you tried to implement this with a ref, React would never re-render the compo
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [13]}}
+```js
 import { useRef } from 'react';
 
 export default function Counter() {
@@ -313,7 +313,7 @@ Regular variables like `let timeoutID` don't "survive" between re-renders becaus
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [10]}}
+```js
 import { useState } from 'react';
 
 export default function Chat() {
@@ -418,7 +418,7 @@ This button is supposed to toggle between showing "On" and "Off". However, it al
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [10]}}
+```js
 import { useRef } from 'react';
 
 export default function Toggle() {

src/content/learn/removing-effect-dependencies.md

@@ -303,7 +303,7 @@ Suppressing the linter leads to very unintuitive bugs that are hard to find and
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [14]}}
+```js
 import { useState, useEffect } from 'react';
 
 export default function Timer() {
@@ -794,7 +794,7 @@ It is important to declare it as a dependency! This ensures, for example, that i
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [10]}}
+```js
 import { useState, useEffect } from 'react';
 import { createConnection } from './chat.js';
 

src/content/learn/responding-to-events.md

@@ -546,7 +546,7 @@ Clicking this button is supposed to switch the page background between white and
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [5, 7]}}
+```js
 export default function LightSwitch() {
   function handleClick() {
     let bodyStyle = document.body.style;

src/content/learn/separating-events-from-effects.md

@@ -711,7 +711,7 @@ Here, `url` inside `onVisit` corresponds to the *latest* `url` (which could have
 
 In the existing codebases, you may sometimes see the lint rule suppressed like this:
 
-```js {expectedErrors: {'react-compiler': [8]}} {7-9}
+```js {7-9}
 function Page({ url }) {
   const { items } = useContext(ShoppingCartContext);
   const numberOfItems = items.length;
@@ -735,7 +735,7 @@ Can you see why?
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [16]}}
+```js
 import { useState, useEffect } from 'react';
 
 export default function App() {
@@ -990,7 +990,7 @@ To fix this code, it's enough to follow the rules.
 ```
 
 
-```js {expectedErrors: {'react-compiler': [14]}}
+```js
 import { useState, useEffect } from 'react';
 
 export default function Timer() {

src/content/learn/state-a-components-memory.md

@@ -23,7 +23,7 @@ Here's a component that renders a sculpture image. Clicking the "Next" button sh
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [7]}}
+```js
 import { sculptureList } from './data.js';
 
 export default function Gallery() {
@@ -1229,7 +1229,7 @@ When you type into the input fields, nothing appears. It's like the input values
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [6]}}
+```js
 export default function Form() {
   let firstName = '';
   let lastName = '';
@@ -1337,7 +1337,7 @@ Are there any limitations on _where_ Hooks may be called? Does this component br
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [9]}}
+```js
 import { useState } from 'react';
 
 export default function FeedbackForm() {

src/content/learn/synchronizing-with-effects.md

@@ -95,7 +95,7 @@ You might be tempted to try to call `play()` or `pause()` during rendering, but
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [7, 9]}}
+```js
 import { useState, useRef, useEffect } from 'react';
 
 function VideoPlayer({ src, isPlaying }) {
@@ -617,7 +617,7 @@ A common pitfall for preventing Effects firing twice in development is to use a
 
 This makes it so you only see `"✅ Connecting..."` once in development, but it doesn't fix the bug.
 
-When the user navigates away, the connection still isn't closed and when they navigate back, a new connection is created. As the user navigates across the app, the connections would keep piling up, the same as it would before the "fix".
+When the user navigates away, the connection still isn't closed and when they navigate back, a new connection is created. As the user navigates across the app, the connections would keep piling up, the same as it would before the "fix". 
 
 To fix the bug, it is not enough to just make the Effect run once. The effect needs to work after re-mounting, which means the connection needs to be cleaned up like in the solution above.
 
@@ -1005,7 +1005,7 @@ export default function MyInput({ value, onChange }) {
   const ref = useRef(null);
 
   // TODO: This doesn't quite work. Fix it.
-  // ref.current.focus()
+  // ref.current.focus()    
 
   return (
     <input
@@ -1468,8 +1468,7 @@ This component shows the biography for the selected person. It loads the biograp
 
 <Sandpack>
 
-{/* not the most efficient, but this validation is enabled in the linter only, so it's fine to ignore it here since we know what we're doing */}
-```js {expectedErrors: {'react-compiler': [9]}} src/App.js
+```js src/App.js
 import { useState, useEffect } from 'react';
 import { fetchBio } from './api.js';
 
@@ -1542,8 +1541,7 @@ To fix this race condition, add a cleanup function:
 
 <Sandpack>
 
-{/* not the most efficient, but this validation is enabled in the linter only, so it's fine to ignore it here since we know what we're doing */}
-```js {expectedErrors: {'react-compiler': [9]}} src/App.js
+```js src/App.js
 import { useState, useEffect } from 'react';
 import { fetchBio } from './api.js';
 
@@ -1607,3 +1605,4 @@ In addition to ignoring the result of an outdated API call, you can also use [`A
 </Solution>
 
 </Challenges>
+

src/content/learn/updating-objects-in-state.md

@@ -55,7 +55,7 @@ This example holds an object in state to represent the current pointer position.
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [11]}}
+```js
 import { useState } from 'react';
 
 export default function MovingDot() {
@@ -209,7 +209,7 @@ These input fields don't work because the `onChange` handlers mutate the state:
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [11, 15, 19]}}
+```js
 import { useState } from 'react';
 
 export default function Form() {
@@ -832,7 +832,7 @@ Your task is to fix all of these bugs. As you fix them, explain why each of them
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [11]}}
+```js
 import { useState } from 'react';
 
 export default function Scoreboard() {
@@ -988,7 +988,7 @@ If something unexpected changes, there is a mutation. Find the mutation in `App.
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [17]}} src/App.js
+```js src/App.js
 import { useState } from 'react';
 import Background from './Background.js';
 import Box from './Box.js';
@@ -1293,7 +1293,7 @@ This is the same buggy example as in the previous challenge. This time, fix the
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [18]}} src/App.js
+```js src/App.js
 import { useState } from 'react';
 import { useImmer } from 'use-immer';
 import Background from './Background.js';

src/content/learn/you-might-not-need-an-effect.md

@@ -34,7 +34,7 @@ To help you gain the right intuition, let's look at some common concrete example
 
 Suppose you have a component with two state variables: `firstName` and `lastName`. You want to calculate a `fullName` from them by concatenating them. Moreover, you'd like `fullName` to update whenever `firstName` or `lastName` change. Your first instinct might be to add a `fullName` state variable and update it in an Effect:
 
-```js {expectedErrors: {'react-compiler': [8]}} {5-9}
+```js {5-9}
 function Form() {
   const [firstName, setFirstName] = useState('Taylor');
   const [lastName, setLastName] = useState('Swift');
@@ -66,7 +66,7 @@ function Form() {
 
 This component computes `visibleTodos` by taking the `todos` it receives by props and filtering them according to the `filter` prop. You might feel tempted to store the result in state and update it from an Effect:
 
-```js {expectedErrors: {'react-compiler': [7]}} {4-8}
+```js {4-8}
 function TodoList({ todos, filter }) {
   const [newTodo, setNewTodo] = useState('');
 
@@ -165,7 +165,7 @@ Also note that measuring performance in development will not give you the most a
 
 This `ProfilePage` component receives a `userId` prop. The page contains a comment input, and you use a `comment` state variable to hold its value. One day, you notice a problem: when you navigate from one profile to another, the `comment` state does not get reset. As a result, it's easy to accidentally post a comment on a wrong user's profile. To fix the issue, you want to clear out the `comment` state variable whenever the `userId` changes:
 
-```js {expectedErrors: {'react-compiler': [6]}} {4-7}
+```js {4-7}
 export default function ProfilePage({ userId }) {
   const [comment, setComment] = useState('');
 
@@ -208,7 +208,7 @@ Sometimes, you might want to reset or adjust a part of the state on a prop chang
 
 This `List` component receives a list of `items` as a prop, and maintains the selected item in the `selection` state variable. You want to reset the `selection` to `null` whenever the `items` prop receives a different array:
 
-```js {expectedErrors: {'react-compiler': [7]}} {5-8}
+```js {5-8}
 function List({ items }) {
   const [isReverse, setIsReverse] = useState(false);
   const [selection, setSelection] = useState(null);
@@ -819,7 +819,7 @@ Simplify this component by removing all the unnecessary state and Effects.
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [12, 16, 20]}}
+```js
 import { useState, useEffect } from 'react';
 import { initialTodos, createTodo } from './todos.js';
 
@@ -1022,7 +1022,7 @@ One solution is to add a `useMemo` call to cache the visible todos. There is als
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [11]}}
+```js
 import { useState, useEffect } from 'react';
 import { initialTodos, createTodo, getVisibleTodos } from './todos.js';
 
@@ -1106,7 +1106,7 @@ Remove the state variable and the Effect, and instead add a `useMemo` call to ca
 
 <Sandpack>
 
-```js {expectedErrors: {'react-compiler': [8]}}
+```js
 import { useState, useMemo } from 'react';
 import { initialTodos, createTodo, getVisibleTodos } from './todos.js';
 
@@ -1363,7 +1363,7 @@ export default function ContactList({
 }
 ```
 
-```js {expectedErrors: {'react-compiler': [8, 9]}} src/EditContact.js active
+```js src/EditContact.js active
 import { useState, useEffect } from 'react';
 
 export default function EditContact({ savedContact, onSave }) {

src/content/reference/react-dom/client/hydrateRoot.md

@@ -296,8 +296,7 @@ import App from './App.js';
 hydrateRoot(document.getElementById('root'), <App />);
 ```
 
-{/* kind of an edge case, seems fine to use this hack here */}
-```js {expectedErrors: {'react-compiler': [7]}} src/App.js active
+```js src/App.js active
 import { useState, useEffect } from "react";
 
 export default function App() {

src/content/reference/react-dom/createPortal.md

@@ -398,8 +398,7 @@ Here is a complete example you can play with:
 }
 ```
 
-{/* TODO(@poteto) - fixed by https://github.com/facebook/react/pull/34462. need a new release */}
-```js {expectedErrors: {'react-compiler': [15]}} src/App.js
+```js src/App.js
 import { useRef, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { createMapWidget, addPopupToMapWidget } from './map-widget.js';