Element type is invalid

Unanswered

Polar bear posted this in #help-forum

Polar bearOP

2024-01-19T23:47:24.000Z

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

Polar bearOP

2024-01-22T19:16:48.000Z

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

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

Ray

2024-01-22T20:12:13.000Z

what render method?

Ray

2024-01-22T20:12:54.000Z

I think you could import the old one with this

import Image from 'next/legacy/image'

@Ray what render method?

Polar bearOP

2024-01-22T20:17:01.000Z

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.

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

Polar bearOP

2024-01-22T20:17:28.000Z

Can try it

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

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

Ray

2024-01-22T20:18:44.000Z

why do you need it?

Polar bearOP

2024-01-22T20:19:05.000Z

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

Ray

2024-01-22T20:24:20.000Z

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

Polar bearOP

2024-01-22T20:35:14.000Z

yes i have tried that as well ðŸ˜¦

@Polar bear yes i have tried that as well ðŸ˜¦

Ray

2024-01-22T20:38:24.000Z

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

Polar bearOP

2024-01-22T20:39:32.000Z

let me try that

Polar bearOP

2024-01-22T20:51:07.000Z

same issue with that idea

@Polar bear same issue with that idea

Ray

2024-01-22T20:51:52.000Z

try run npx next info

Polar bearOP

2024-01-22T20:54:25.000Z

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

Ray

2024-01-22T20:56:42.000Z

hmm could you share the repo?

Polar bearOP

2024-01-22T20:57:05.000Z

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

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

Ray

2024-01-22T21:05:35.000Z

hmm, have you tried it with a new project?

Polar bearOP