Element type is invalid
Unanswered
Polar bear posted this in #help-forum

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:
Component:
Without the next/image, there is no error. Any help would be appreciated. I've been stuck on this all day...
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

Polar bearOP
After console.log(Image) on main branch and my feature branch, it does look like
Before on next 13.4.3,
Now on next 14.1.0,
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...
@Polar bear 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...

I think you could import the old one with this
import Image from 'next/legacy/image'

@Ray what render method?

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.
This is what i see on next 13. you can see a render method. But on next 14, there is none.


@Ray I think you could import the old one with this
ts
import Image from 'next/legacy/image'

Polar bearOP
Can try it
using legacy does "work" but seems to be buggy in the UI...

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`.

@Polar bear 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`.

it odds, have you tried remove
node_modules
and .next
and install again?
Polar bearOP
yes i have tried that as well 😦

@Polar bear yes i have tried that as well 😦

where do you use
CustomerLogo
? does it work with <Image /> instead of <CustomerLogo />?
Polar bearOP
let me try that

Polar bearOP
same issue with that idea

@Polar bear same issue with that idea

try run
npx next info

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

Polar bearOP
i can't, its a work repo in a private org

@Polar bear i can't, its a work repo in a private org

hmm, have you tried it with a new project?

Polar bearOP
i have not, i assume it will work fine in a fresh app from scratch

yea no idea what wrong on your project

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
@Polar bear 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

well but you said even
<Image />
doesn't work too
Polar bearOP
correct, but i just replaced in a parent component in another library, also not directly in the app

console.log(CustomerLogo)