“X is not defined”: Fixing Next.js Import Errors Like a Human, Not a Panic Machine

There’s a special kind of dread that comes from running your app and seeing a big red ReferenceError: X is not defined where X is a component you know you wrote. You didn’t imagine it. It exists. It’s sitting right there in your project folder, judging you.

The good news: this error is almost always the same problem wearing a different costume. Let’s walk through it using two real examples — Image and a custom Header component — plus how to properly reference local images while we’re at it.

Why “Is Not Defined” Happens in React/Next.js

Unlike some frameworks, React and Next.js don’t have global components floating around waiting to be used. If you reference something in JSX, it has to be explicitly imported at the top of the file — no exceptions, no vibes-based imports.

So when you see:

Runtime ReferenceError: Image is not defined

or

Runtime ReferenceError: Header is not defined

Nine times out of ten, the fix is embarrassingly simple: you forgot the import.

Fixing the Image is not defined Error

Next.js ships its own optimized Image component, but it’s not automatic — you have to import it like anything else:

import Image from "next/image";

Once imported, you can use it in your JSX:

<Image
  src="/next.svg"
  alt="Logo"
  width={120}
  height={40}
/>

Here’s the part that trips people up next: next/image requires width and height (or fill, if you want it to size itself to a parent container). Skip those, and you’ll trade one error for another — Next.js is not going to let you get away with an undersized guess.

Using External Image URLs

If your image is hosted somewhere external (Cloudinary, S3, a CDN, etc.), Next.js won’t optimize it by default — it’ll throw an “Invalid src prop” error unless you explicitly whitelist that domain in next.config.ts:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "res.cloudinary.com",
      },
    ],
  },
};

export default nextConfig;

This is a security feature, not Next.js being difficult — it stops random domains from getting optimized (and potentially abused) through your app without your permission.

Using Local Images from the public Folder

If your image already lives inside your project — say, at public/next.svg — you don’t need any of the remote pattern config above. Anything inside public/ is automatically served from the root URL path.

That means:

public/next.svg        →  /next.svg
public/images/logo.png →  /images/logo.png

So referencing it is as simple as:

import Image from "next/image";

<Image src="/next.svg" alt="Logo" width={120} height={40} />

Bonus move: import it as a module instead of a string path, and Next.js will automatically figure out the width and height for you:

import nextLogo from "@/public/next.svg";

<Image src={nextLogo} alt="Logo" />

Less typing, fewer chances to mismatch your dimensions. Everybody wins.

Fixing the Header is not defined Error

This one follows the exact same logic, just with your own custom component instead of a built-in one.

Runtime ReferenceError: Header is not defined
app/layout.tsx (29:14) @ RootLayout
> 29 |    <Header />

The fix is the same story: import it.

import Header from "@/components/Header";

(Adjust the path based on wherever your Header component actually lives — components/, app/components/, src/components/, wherever you keep your building blocks.)

If you genuinely don’t know where the file is, don’t scroll through folders by hand like it’s 2009 — just search for it:

find . -iname "Header*" -not -path "*/node_modules/*"

And if the component doesn’t exist yet at all, here’s a minimal starting point:

export default function Header() {
  return (
    <header className="flex items-center justify-between px-4 py-4">
      {/* logo, nav links, etc. */}
    </header>
  );
}

The Pattern to Remember

Every “X is not defined” error in React/Next.js boils down to the same two questions:

1. Did I import it? (Most common. Also most embarrassing once you spot it.)
2. Is the import path actually correct? (Second most common. Especially painful with @/ alias typos.)

Once you get in the habit of checking imports first, this error stops being scary and starts being a two-second fix — right up there with “did you save the file” on the list of programming’s most humbling questions.

Wrapping Up

Image, Header, or any other component throwing a “not defined” error isn’t broken — it’s just waiting patiently at the top of your file for an import statement that never showed up. Add it, double-check your props (especially width/height on Image), and you’re back in business.

React doesn’t do implicit magic. It’s explicit, predictable, and occasionally a little too honest about your mistakes.