Element type is invalid
Unanswered
Polar bear posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
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
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
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...![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
what render method?
I think you could import the old one with this
import Image from 'next/legacy/image'
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
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.
![Image](https://cdn.discordapp.com/attachments/1198051112457076766/1199085330926678086/image.png?ex=65c1423c&is=65aecd3c&hm=f437e2ba85cbc1537800e7b5cb28e5005c54fb9d5e766f6da6d16d2517a45afa&)
Can try it
using legacy does "work" but seems to be buggy in the UI...
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
why do you need it?
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
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](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
it odds, have you tried remove
node_modules
and .next
and install again?![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Polar bearOP
yes i have tried that as well 😦
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
where do you use
CustomerLogo
? does it work with <Image /> instead of <CustomerLogo />?![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Polar bearOP
let me try that
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Polar bearOP
same issue with that idea
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
try run
npx next info
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
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](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
hmm could you share the repo?
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Polar bearOP
i can't, its a work repo in a private org
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
hmm, have you tried it with a new project?
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Polar bearOP
i have not, i assume it will work fine in a fresh app from scratch
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
yea no idea what wrong on your project
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
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](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
well but you said even
<Image />
doesn't work too![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Polar bearOP
correct, but i just replaced in a parent component in another library, also not directly in the app
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
console.log(CustomerLogo)