Animated WebP images work in development but not when building

[aaditmshah]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Fri, 15 Jul 2022 15:33:02 +0000
Binaries:
  Node: 16.16.0
  npm: 8.11.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 12.2.4-canary.11
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

1. When I run yarn dev and open http://localhost:3000/, I can see the animated image of the cat.

2. However, when I run yarn build I get the following error.

   Failed to compile.
   
   ./assets/cat.webp
   TypeError: Cannot read properties of null (reading 'width')
       at Object.processBuffer (/home/aaditmshah/Repositories/animated-webp-static-import-bug/node_modules/next/dist/server/lib/squoosh/main.js:64:46)
       at async Object.resizeImage (/home/aaditmshah/Repositories/animated-webp-static-import-bug/node_modules/next/dist/server/image-optimizer.js:619:21)
       at async Span.traceAsyncFn (/home/aaditmshah/Repositories/animated-webp-static-import-bug/node_modules/next/dist/trace/trace.js:79:20)
       at async /home/aaditmshah/Repositories/animated-webp-static-import-bug/node_modules/next/dist/build/webpack/loaders/next-image-loader.js:52:38
       at async Span.traceAsyncFn (/home/aaditmshah/Repositories/animated-webp-static-import-bug/node_modules/next/dist/trace/trace.js:79:20)
   
   Import trace for requested module:
   ./pages/index.tsx
   
   
   > Build failed because of webpack errors
   

Expected Behavior

• When I run yarn build the Next.js app should build without any errors.
• After that, if I run yarn start and open http://localhost:3000/, I should see the animated image of the cat.

Link to reproduction

https://github.com/aaditmshah/animated-webp-static-import-bug

To Reproduce

1. Install the dependencies using yarn install.
2. Run yarn dev and open http://localhost:3000/ to see the animated image of the cat.
3. Run yarn build to see the aforementioned build error.

[balazsorban44]

Thanks for reporting. This seems to be an issue with squoosh, the local image processing library. I am trying to debug this, in the meantime, installing sharp should be a workaround. 🙏

For some reason, this returns null:

next.js/packages/next/server/lib/squoosh/impl.ts

Lines 47 to 49 in 6b49d47

	const mod = await encoder.dec()
	const rgba = mod.decode(new Uint8Array(buffer))
	return rgba

[aaditmshah]

Thank you so much. Installing sharp resolved the issue for me.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.