Element type is invalid

[tawny saddle]

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

[oblique bone]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[tawny saddle]

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

[summer crag]

what render method?

[summer crag]

I think you could import the old one with this

import Image from 'next/legacy/image'

[tawny saddle]

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.

[tawny saddle]

Can try it

using legacy does "work" but seems to be buggy in the UI...

[summer crag]

why do you need it?

[tawny saddle]

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

[summer crag]

it odds, have you tried remove node_modules and .next and install again?

[tawny saddle]

yes i have tried that as well 😦

[summer crag]

where do you use CustomerLogo? does it work with <Image /> instead of <CustomerLogo />?

[tawny saddle]

let me try that

same issue with that idea

[summer crag]

try run npx next info

[tawny saddle]

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

[summer crag]

hmm could you share the repo?

[tawny saddle]

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

[summer crag]

hmm, have you tried it with a new project?

[tawny saddle]

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

[summer crag]

yea no idea what wrong on your project

[tawny saddle]

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

[summer crag]

well but you said even <Image /> doesn't work too

[tawny saddle]

correct, but i just replaced in a parent component in another library, also not directly in the app