vercel / vercel/next.js

Turbopack: importing `.avif` files fails with ‘AVIF image not supported’ warnings

Open
#86,392 22 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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/sleepy-stitch-xhgd6r?file=%2Fapp%2Fpage.tsx

Image
To Reproduce
  1. Import an .avif file using a static import statement
  2. Build with Turbopack -> warns about AVIF not being supported 💥
Current vs. Expected behavior

Currently, Turbopack shows a warning about AVIF imports:

$ pnpm build

> @ build /project/workspace
> next build

Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

▲ Next.js 16.0.2-canary.27 (Turbopack)

  Creating an optimized production build ...
Turbopack build encountered 1 warnings:
./app/a.avif
AVIF image not supported
This version of Turbopack does not support AVIF images, will emit without optimization or encoding

Import trace:
  Server Component:
    ./app/a.avif
    ./app/page.tsx


✓ Compiled successfully in 2.6s
✓ Finished TypeScript in 2.5s    
✓ Collecting page data using 3 workers in 399.3ms    
✓ Generating static pages using 3 workers (4/4) in 136.9ms
✓ Finalizing page optimization in 12.9ms    

Route (app)
┌ ○ /
└ ○ /_not-found


○  (Static)  prerendered as static content

webpack supports .avif imports

Expected: Turbopack supports AVIF

Provide environment information
Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 8198
  Available CPU cores: 4
Binaries:
  Node: 20.12.1
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 16.0.2-canary.27 // Latest available version is detected (16.0.2-canary.27).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A
Which area(s) are affected? (Select all that apply)

Turbopack

Which stage(s) are affected? (Select all that apply)

next build (local)

Additional context

--

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 run pnpm build to confirm the warning for the static .avif import in app/page.tsx. Trace the Turbopack handling that produces the “AVIF image not supported” warning. Done means a static AVIF import builds without that warning and behaves as expected, matching the stated webpack behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
next.js
Domain
build-system
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.