Building a component library with `tsup` that uses `next/image` breaks when one of the components directly renders `Image` since `13.4.8-canary.9`

[rodrigoehlers]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

This outputs seems to have issues with pnpm (?) monorepos. I've corrected the versions.
    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.13.0
      npm: 9.3.1
      Yarn: 1.22.19
      pnpm: 8.6.0
    Relevant Packages:
      next: 13.4.8 <-- I'm definitely using 13.4.9-canary.1 in the app (apps/web).
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: N/A <-- 5.1.6 across all apps and packages
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Image optimization (next/image, next/legacy/image)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/rodrigoehlers/next-13.4.8-tsup-image-issue

or (quicker)

https://stackblitz.com/github/rodrigoehlers/next-13.4.8-tsup-image-issue?file=README.md

To Reproduce

See README.md in repository.

Describe the Bug

See README.md in repository.

Expected Behavior

See README.md in repository.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1433

[CobyPear]

We started seeing the same thing with our component library bundled with tsup, but we're still using the Pages router.

[igordanchenko]

Same issue here. Reproduces under both app and pages routers.

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

Here is a minimal repro - https://codesandbox.io/p/sandbox/next-52216-7lrx47?file=%2Fpages%2Findex.tsx

[stevejcox]

Seeing the same thing, however we bundle with babel.

[Flaxxas]

Facing the same problem

[oalexdoda]

Same issue here. A transpiled ESM component built with TSUP that uses next/image will keep breaking things.

[angeloashmore]

We're having the same issue at Prismic with @prismicio/next, where we provide a <PrismicNextImage> component that wraps next/image.

<PrismicNextImage> source code: https://github.com/prismicio/prismic-next/blob/186d1b37bf8494f380e27c4dc540bcba3c8bf3c9/src/PrismicNextImage.tsx#L145-L155

The component throws the error described above when server rendered. It does not seem to throw the error when a page is refreshed using Fast Refresh after <PrismicNextImage> is added to a page.

[stevejcox]

Still seeing this in 13.4.9

[angeloashmore]

See this PR for a (hopefully) temporary workaround: prismicio/prismic-next#79

[colbyfayock]

thanks @angeloashmore that worked perfect for me! cloudinary-community/next-cloudinary#229