Turbopack: importing `.avif` files fails with ‘AVIF image not supported’ warnings
Open
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
To Reproduce
- Import an
.aviffile using a staticimportstatement - 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
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 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