Image component in monorepo package

[languid current]

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.

[soft warren]

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)

[languid current]

The issue goes away if instead of building the package with esbuild I just generate the types/styles and leave the transpilation process to Next by leveraging the transpilePackages option inside next.config.js.