next.js: 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`

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

About this issue

Original URL
State: closed
Created a year ago
Reactions: 22
Comments: 20 (9 by maintainers)

Commits related to this issue

Workaround für https://github.com/vercel/next.js/issues/52216 #854 — committed to Neuvernetzung/design-system by timheerwagen a year ago
Merge pull request #855 from Neuvernetzung/fix#854 Workaround für https://github.com/vercel/next.js/issues/52216 #854 — committed to Neuvernetzung/design-system by timheerwagen a year ago
fix(#52216): add default export interop to `image-external` — committed to SukkaW/next.js by SukkaW a year ago
fix(#52216): add export interop to `next/image` — committed to SukkaW/next.js by SukkaW a year ago
fix(image): work around Next.js default export bug (vercel/next.js#52216, prismicio/prismic-next#79) — committed to animareflection/ui by coopbri 10 months ago
Example App Components (#64) * chore(next-example): render all client components * fix(client-components): update accordion and slider components * refactor(accordion): update accordion compone... — committed to animareflection/ui by hobbescodes 10 months ago

Most upvoted comments

See this PR for a (hopefully) temporary workaround: https://github.com/prismicio/prismic-next/pull/79

angeloashmore on Jul 10, 2023

Ultimately, I don’t think you should be bundling next/image with tsup or any other bundler since it relies on internals to Next.js. Instead, your component library can accept either or <Image> as prop/param.

Libraries shouldn’t be bundling next/image, but using it as a peer dependency should be a supported use case, in my opinion. Libraries should be able to wrap next/image to provide things like default styling and props.

For example, @prismicio/next provides a <PrismicNextImage> component that lets developers pass a CMS content field to the component to easily render a next/image with the correct URL and dimensions.

I know CJS/ESM interop is challenging, however, and I unfortunately don’t know a solution either.

angeloashmore on Oct 13, 2023

This issue also happens for us with our internal ui kit after upgrading to 13.4.9 from 13.4.7. More specifically comes from a package called @chakra-ui/next-js that exports a wrapped Image component built on top of the next/image one.

For now, downgrading next to 13.4.7 seems to fix the problem.

acalinica on Jul 11, 2023

This has been fixed in PR https://github.com/vercel/next.js/issues/59852 and will be available in the next stable release.

You can try it out today using the canary release with npm install next@canary, thanks!

styfle on Jan 4, 2024

thanks @angeloashmore that worked perfect for me! https://github.com/colbyfayock/next-cloudinary/pull/229

colbyfayock on Jul 11, 2023

It’s been a few months now and this is really keeping us stuck at v 13.4.7. how can we prioritise this? It really does not seem like such a hard thing to solve plus @SukkaW proposed a PR with a potential fix.

My proposed PR doesn’t work. It will break the Next.js built-in compiler. We are still investigating this.

Basically, the issue is just https://github.com/webpack/webpack/issues/7973 all over again.

SukkaW on Oct 12, 2023

I have created a PR #53943 to fix the issue.

SukkaW on Aug 12, 2023

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.

angeloashmore on Jul 5, 2023