created Bugs 2

package.json

@@ -8,7 +8,7 @@
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.1",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
@@ -34,5 +34,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3"
   }
 }

src/App.css

@@ -17,10 +17,10 @@
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
+  font-size: 18;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
   color: white;
 }
 

src/App.js

@@ -1,11 +1,17 @@
 import logo from './logo.svg';
 import './App.css';
+import Counter from '../Counter';
 
 function App() {
+  // Bug 1: Reference to undefined variable
+  const appTitle = appName + " - React App";
+
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
+        <h1>{appTitle}</h1>
+        <Counter />
         <p>
           Edit <code>src/App.js</code> and save to reload.
         </p>

src/Counter.js

@@ -0,0 +1,20 @@
+import React, { useState, useEffect } from 'react';
+
+// Bug 3: Infinite loop in useEffect with missing dependency array
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    // This will cause an infinite loop because there's no dependency array
+    setCount(count + 1);
+  });
+
+  return (
+    <div>
+      <h2>Counter: {count}</h2>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+    </div>
+  );
+}
+
+export default Counter; 

src/index.js

@@ -7,5 +7,5 @@ ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root")
+  document.getElementById("rot")
 );