I'm building a monorepo with a couple of different frontends and a number of internal packages. One of those packages contains the design system for the frontends. Now my issue is that as soon as I try to use an Image component inside a design system component and import it in one of my apps an error is thrown.

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

The component code looks something like this:

<div className="...">
  <Image
    src={user.imageUrl} // This comes from Clerk
    alt="..."
    width={32}
    height={32}
    className="..."
  />
</div>

Initially I thought it was caused by the unrecognised origin of the image (img.clerk.com) and that the error was masked in some way due to it being imported through a package, but adding remotePatterns to my nxt.config.js didn't change a thing.

Note: I'm using esbuild with tsc and tailwind's cli for the building step of the package.