Next.js Discord

Discord Forum

Element type is invalid

Unanswered
Polar bear posted this in #help-forum
Open in Discord
Avatar
Polar bearOP
I just upgraded to next 14 from 13 and started seeing this error anywhere i use next/image. Searching far and wide, i have not found any solution...

Error:
Unhandled Runtime Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `CustomerLogo`.


Component:
import Image, { ImageProps } from "next/image";

export const CustomerLogo = ({ src, ...rest }: Partial<ImageProps>) => {
  if (!src) {
    return null;
  }

  return (
      <Image
        // TODO: replace with alt text from the service, once it is available
        alt="foo"
        src={src}
        style={{ objectFit: "contain" }}
        fill
        unoptimized
        {...rest}
      />
  );
};


Without the next/image, there is no error. Any help would be appreciated. I've been stuck on this all day...

26 Replies

Avatar
Polar bearOP
After console.log(Image) on main branch and my feature branch, it does look like import Image from "next/image" is returning different modules.

Before on next 13.4.3, Image had a render method and looked like a proper react component.

Now on next 14.1.0, Image has no render method, but does still have a default property which has a render method, but clearly that isn't being used...
Avatar
Ray
what render method?
I think you could import the old one with this
import Image from 'next/legacy/image'
Avatar
Polar bearOP
i'm not sure...

This is what i see on next 13. you can see a render method. But on next 14, there is none.
Image
Can try it
using legacy does "work" but seems to be buggy in the UI...
Avatar
Ray
why do you need it?
Avatar
Polar bearOP
i dont, react/next do to render components right?
Like in my original post, React is trying to render a component, but Image doesn't look like a component anymore, it has no render method, so react thinks its an object, and it can't render objects. So it throws the error:
Unhandled Runtime Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `CustomerLogo`.
Avatar
Ray
it odds, have you tried remove node_modules and .next and install again?
Avatar
Polar bearOP
yes i have tried that as well 😦
Avatar
Ray
where do you use CustomerLogo? does it work with <Image /> instead of <CustomerLogo />?
Avatar
Polar bearOP
let me try that
Avatar
Polar bearOP
same issue with that idea
Avatar
Ray
try run npx next info
Avatar
Polar bearOP
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:55:06 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T6020
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 3.7.0
  pnpm: N/A
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A
Avatar
Ray
hmm could you share the repo?
Avatar
Polar bearOP
i can't, its a work repo in a private org
Avatar
Ray
hmm, have you tried it with a new project?
Avatar
Polar bearOP
i have not, i assume it will work fine in a fresh app from scratch
Avatar
Ray
yea no idea what wrong on your project
Avatar
Polar bearOP
Me either! lol thx for trying to help. Maybe someone else has an idea
if it helps at all, CustomerLogo is in a component library pkg in my mono-repo. My app is a separate pkg in the mono-repo
Avatar
Ray
well but you said even <Image /> doesn't work too
Avatar
Polar bearOP
correct, but i just replaced in a parent component in another library, also not directly in the app
Avatar
Ray
console.log(CustomerLogo)