Common JavaScript, React and Next.js errors and how to fix them

file:///app/01-undefined.mjs:2
console.log(user.address.city);
                         ^

TypeError: Cannot read properties of undefined (reading 'city')
    at file:///app/01-undefined.mjs:2:26

const user = { name: "Aigerim" };
console.log(user.address?.city ?? "city not set");

file:///app/02-not-a-function.mjs:2
const doubled = data.map((x) => x * 2);
                     ^

TypeError: data.map is not a function
    at file:///app/02-not-a-function.mjs:2:22

const data = { items: [1, 2, 3] };
const list = Array.isArray(data) ? data : data.items;
console.log(list.map((x) => x * 2));

file:///app/03-not-defined.mjs:2
console.log(totl);
            ^

ReferenceError: totl is not defined
    at file:///app/03-not-defined.mjs:2:13

file:///app/03-tdz.mjs:1
console.log(total);
            ^

ReferenceError: Cannot access 'total' before initialization
    at file:///app/03-tdz.mjs:1:13

/app/05-await.cjs:2
  const res = await fetch("http://localhost:3101/api/products");
              ^^^^^

SyntaxError: await is only valid in async functions and the top level bodies of modules

UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "timeout".

async function loadUser() {
  throw new Error("User not found");
}
try {
  await loadUser();
} catch (err) {
  console.error("Could not load user:", err.message);
}

<anonymous_script>:1
<!DOCTYPE html><html><body><h1>Not Found</h1></body></html>
^

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
    at JSON.parse (<anonymous>)

import { createServer } from "node:http";

const server = createServer((req, res) => {
  res.writeHead(404, { "Content-Type": "text/html" });
  res.end("<!DOCTYPE html><html><body><h1>Not Found</h1></body></html>");
}).listen(3101);

async function getJson(url) {
  const res = await fetch(url);
  const type = res.headers.get("content-type") ?? "";
  if (!res.ok || !type.includes("application/json")) {
    throw new Error(`${url}: ${res.status} ${res.statusText}, content-type ${type}`);
  }
  return res.json();
}

try {
  await getJson("http://localhost:3101/api/products");
} catch (err) {
  console.error(err.message);
} finally {
  server.close();
}

[TypeError: fetch failed] {
  [cause]: AggregateError [ECONNREFUSED]: 
      at internalConnectMultiple (node:net:1430:18)
      at afterConnectMultiple (node:net:2099:7) {
    code: 'ECONNREFUSED',
    [errors]: [
      Error: connect ECONNREFUSED ::1:3999

try {
  await fetch("http://localhost:3999/api/products");
} catch (err) {
  console.error(err.message, "->", err.cause?.code);
}

Access to fetch at 'http://localhost:4101/api/products' from origin 'http://localhost:4100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to fetch at 'http://localhost:4101/api/products' from origin 'http://localhost:4102' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

TypeError: Failed to fetch

createServer((req, res) => {
  if (fixed) {
    res.setHeader("Access-Control-Allow-Origin", ALLOWED_ORIGIN);
    res.setHeader("Vary", "Origin");
    if (req.method === "OPTIONS") {
      // preflight: which methods and headers the page may send
      res.writeHead(204, {
        "Access-Control-Allow-Methods": "GET, POST",
        "Access-Control-Allow-Headers": "Content-Type",
        "Access-Control-Max-Age": "600",
      });
      return res.end();
    }
  }
  res.writeHead(200, { "Content-Type": "application/json" });
  res.end(JSON.stringify([{ id: 1, name: "Espresso Blend 1 kg" }]));
}).listen(4101, () => console.log(`page :4100, api :4101, fixed=${fixed}`));

/app/cjs-pkg/index.js:1
import { readFileSync } from "node:fs";
^^^^^^

SyntaxError: Cannot use import statement outside a module

file:///app/09-require-in-esm.mjs:1
const fs = require("node:fs");
           ^

ReferenceError: require is not defined in ES module scope, you can use import instead

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'dayjs' imported from /app/11-missing-package.mjs

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/app/utils' imported from /app/11-no-extension.mjs
Did you mean to import "./utils.js"?

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: shop-front@1.0.0
npm error Found: react@18.3.1
npm error node_modules/react
npm error   react@"18" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^19.3.0" from react-dom@19.3.0
npm error node_modules/react-dom
npm error   react-dom@"19" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry this command with --force or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution.

Error: listen EADDRINUSE: address already in use :::3001

npm error Missing script: "dev"
npm error
npm error To see a list of scripts, run:
npm error   npm run

src/errors.ts(4,7): error TS2322: Type 'string' is not assignable to type 'number'.
src/errors.ts(9,14): error TS2339: Property 'data' does not exist on type 'Response'.
src/errors.ts(17,13): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
src/errors.ts(22,13): error TS18048: 'found' is possibly 'undefined'.
src/errors.ts(25,23): error TS7006: Parameter 'items' implicitly has an 'any' type.
src/errors.ts(30,28): error TS2307: Cannot find module './utils/date.js' or its corresponding type declarations.

type User = { id: number; name: string; email?: string };

// TS2322: convert the value explicitly
const quantity: number = Number("5");

// TS2339: Response has no data — read the body with json()
async function loadUsers(): Promise<User[]> {
  const res = await fetch("/api/users");
  return (await res.json()) as User[];
}

// TS2345: convert the string before passing it
function formatPrice(price: number) {
  return `${price} ₸`;
}
const priceFromInput = "4900";
formatPrice(Number(priceFromInput));

// TS18048: handle the "not found" case
const users: User[] = [{ id: 1, name: "Aigerim" }];
const found = users.find((u) => u.id === 2);
console.log(found?.name ?? "user not found");

// TS7006: describe the parameter type
export function total(items: unknown[]) {
  return items.length;
}

export { quantity, loadUsers };

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

src/cases/TooManyRenders.tsx(6,18): error TS2322: Type 'void' is not assignable to type 'MouseEventHandler<HTMLButtonElement> | undefined'.

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>;
}

Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

import { useState } from "react";

export default function Filters() {
  const [filters, setFilters] = useState({ category: "coffee", page: 2 });
  // reset the page in the same event that changes the category
  function changeCategory(category: string) {
    setFilters({ category, page: 1 });
  }
  return (
    <p>
      <button onClick={() => changeCategory("tea")}>Tea</button> {filters.category}, page{" "}
      {filters.page}
    </p>
  );
}

Each child in a list should have a unique "key" prop.

Check the render method of `ProductList`. See https://react.dev/link/warning-keys for more information.

const products = [
  { id: 1, name: "Espresso Blend 1 kg" },
  { id: 2, name: "Colombia Supremo 250 g" },
];

export default function ProductList() {
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

Error: Objects are not valid as a React child (found: object with keys {name, email}). If you meant to render a collection of children, use an array instead.

const user = { name: "Aigerim", email: "aigerim@example.com" };

export default function Profile() {
  return (
    <p>
      User: {user.name} ({user.email})
    </p>
  );
}

React has detected a change in the order of Hooks called by Cart. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://react.dev/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useState                   useState
2. undefined                  useState
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Error: Rendered more hooks than during the previous render.

import { useState } from "react";

export default function Cart({ items }: { items: string[] }) {
  const [delivery, setDelivery] = useState("courier");
  const [promo, setPromo] = useState(""); // all hooks before any return
  if (items.length === 0) {
    return <p>Cart is empty</p>;
  }
  return (
    <form>
      <input value={promo} onChange={(e) => setPromo(e.target.value)} />
      <select value={delivery} onChange={(e) => setDelivery(e.target.value)}>
        <option>courier</option>
        <option>pickup</option>
      </select>
    </form>
  );
}

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.

Uncaught Error: Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch
  ...
                          <MenuLabel>
                            <p>
+                             Mobile menu
-                             Desktop menu

"use client";

import { useEffect, useState } from "react";

export default function MenuLabel() {
  const [isMobile, setIsMobile] = useState(false); // the same value on the server and on the first client render
  useEffect(() => {
    setIsMobile(window.innerWidth < 1024); // runs only in the browser, after hydration
  }, []);
  return <p>{isMobile ? "Mobile menu" : "Desktop menu"}</p>;
}

./app/page.tsx:1:10
Error: You're importing a module that depends on `useState` into a React Server Component module. This API is only available in Client Components. To fix, mark the file (or its parent) with the `"use client"` directive.
    Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client

"use client";

import { useState } from "react";

export default function CartCounter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Items in cart: {count}</button>;
}

./app/cart-counter.tsx:2:1
Error: The "use client" directive must be placed before other expressions. Move it to the top of the file to resolve this issue.

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Event handlers cannot be passed to Client Component props.
  {onClick: function onClick, children: ...}
            ^^^^^^^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: window is not defined
    at <unknown> (app\theme-label.tsx:4:17)
  2 |
  3 | export default function ThemeLabel() {
> 4 |   const theme = window.localStorage.getItem("theme") ?? "light";
    |                 ^

"use client";

import { useEffect, useState } from "react";

export default function ThemeLabel() {
  const [theme, setTheme] = useState("light");
  useEffect(() => {
    // the effect runs only in the browser, after hydration
    setTheme(window.localStorage.getItem("theme") ?? "light");
  }, []);
  return <p>Theme: {theme}</p>;
}

./app/user-badge.tsx:3:1
Error: You're importing a module that depends on "next/headers" into a React Client Component module. This API is only available in Server Components but one of its parents is marked with "use client", so this module is also a Client Component.
    Learn more: https://nextjs.org/docs/app/building-your-application/rendering

<Products> is an async Client Component. Only Server Components can be async at the moment. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

./app/page.tsx:1:1
Error: Module not found: Can't resolve '@/components/Header'

Error: Route "/": Next.js encountered uncached or runtime data during prerendering.

`fetch(...)`, `cookies()`, `headers()`, `params`, `searchParams`, or `connection()` accessed outside of `<Suspense>` prevents the route from being prerendered, blocking the page load and leading to a slower user experience.

Ways to fix this:
  - [stream] Provide a placeholder with `<Suspense fallback={...}>` around the data access
  - [cache] For uncached data (`fetch`, database calls): cache the access with `"use cache"` (does not apply to `connection()`)
  - [block] Set `export const instant = false` to allow a blocking route

Learn more: https://nextjs.org/docs/messages/blocking-prerender-dynamic

import { Suspense } from "react";

async function Products() {
  const res = await fetch("https://example.com/api/products");
  const products: { id: number; name: string }[] = await res.json();
  return <ul>{products.map((p) => <li key={p.id}>{p.name}</li>)}</ul>;
}

export default function Home() {
  return (
    <main>
      <h1>Shop</h1>
      <Suspense fallback={<p>Loading products…</p>}>
        <Products />
      </Suspense>
    </main>
  );
}

Error: Minified React error #301; visit https://react.dev/errors/301 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

src/cases/InvalidHookCall.tsx:5:19: error react-hooks(rules-of-hooks): React Hook "useState" is called in function "getInitialTheme" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".
src/cases/HooksOrder.tsx:9:29: error react-hooks(rules-of-hooks): React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render.
src/cases/MissingKey.tsx:9:17: warning react(jsx-key): Missing "key" prop for element in iterator.