Importing static image from npm package fails under Turbopack
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/unruffled-nightingale-kz7hrz?workspaceId=ws_VUkViYAi9UZNwki3Jj7LWi
To Reproduce
- Start the application in development with turbopack
- Observe the error message
- Start the application without turbopack
- Observe the image appearing
Current vs. Expected behavior
I expected it to behave the same way for turbopack as for webpack, but it seems turbopack only returns a string URL for imported images, instead of the object with metadata Next.js Image expects. Therefore it throws an error.
Also worth noting that it works with and without turbopack if the image is not imported from node_modules but instead in the project itself
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.5.0: Tue Apr 22 19:54:49 PDT 2025; root:xnu-11417.121.6~2/RELEASE_ARM64_T6000
Available memory (MB): 16384
Available CPU cores: 10
Binaries:
Node: 22.13.1
npm: 11.3.0
Yarn: 1.22.22
pnpm: N/A
Relevant Packages:
next: 15.4.3 // Latest available version is detected (15.4.3).
eslint-config-next: N/A
react: 19.1.0
react-dom: 19.1.0
typescript: 5.8.3
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Image (next/image), Turbopack
Which stage(s) are affected? (Select all that apply)
next dev (local)
Additional context
I have not tested this with next build yet, but I would expect running turbopack there would yield the same results.
Also worth noting that it works with and without turbopack if the image is not imported from node_modules but instead in the project itself
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox reproduction and the next/image import path, then compare next dev with and without Turbopack. Trace how a static image imported from node_modules is represented in each mode; done means Turbopack supplies the metadata object expected by next/image, matching webpack behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, next.js, react
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100