vercel / vercel/next.js

Importing static image from npm package fails under Turbopack

Open
#81,964 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Image (next/image) linear: turbopack Turbopack
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
  1. Start the application in development with turbopack
  2. Observe the error message
  3. Start the application without turbopack
  4. 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

PACK-5712

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.