Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Get error `unwrap_throw` failed on build when importing a png file

See original GitHub issue

Verify canary release

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

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #58~20.04.1-Ubuntu SMP Tue Jun 14 11:29:12 UTC 2022
    Binaries:
      Node: 16.6.1
      npm: 7.20.3
      Yarn: 1.22.10
      pnpm: N/A
    Relevant packages:
      next: 12.1.6
      react: 18.1.0
      react-dom: 18.1.0

What browser are you using? (if relevant)

Chrome 100.0.4896.127

How are you deploying your application? (if relevant)

other

Describe the Bug

Importing a png file in a component works in development but produces the following error on build:

Failed to compile.

./assets/images/service-bg.png
Error: `unwrap_throw` failed
    at imports.wbg.__wbindgen_throw (/var/www/html/nextpoint.base/node_modules/next/dist/server/lib/squoosh/png/squoosh_png.js:125:15)
    at <anonymous>:wasm-function[169]:0x165df
    at <anonymous>:wasm-function[9]:0xbe03
    at Object.encode (/var/www/html/nextpoint.base/node_modules/next/dist/server/lib/squoosh/png/squoosh_png.js:67:14)
    at Object.encode (/var/www/html/nextpoint.base/node_modules/next/dist/server/lib/squoosh/codecs.js:281:49)
    at Object.encodePng (/var/www/html/nextpoint.base/node_modules/next/dist/server/lib/squoosh/impl.js:118:23)

Import trace for requested module:
./components/visual/Visual.js
./pages/index.js


> Build failed because of webpack errors

It only happens to certain png file. Not all png images causes the error.

I tried to npm install next@canary to see if the issue is fixed but got the following error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: eslint-config-next@12.1.6
npm ERR! Found: next@12.1.7-canary.40
npm ERR! node_modules/next
npm ERR!   next@"12.1.7-canary.40" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer next@">=10.2.0" from eslint-config-next@12.1.6
npm ERR! node_modules/eslint-config-next
npm ERR!   dev eslint-config-next@"12.1.6" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: next@12.1.6
npm ERR! node_modules/next
npm ERR!   peer next@">=10.2.0" from eslint-config-next@12.1.6
npm ERR!   node_modules/eslint-config-next
npm ERR!     dev eslint-config-next@"12.1.6" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Expected Behavior

no error

Link to reproduction

Import a certain png file in a jsx file and it throws error on build

To Reproduce

pages/index.js

import serviceImg from 'assets/images/service.png';

Following image causes build to fail:

service-bg

Issue Analytics

State:
Created a year ago
Reactions:7
Comments:6

Top GitHub Comments

8reactions

PumpedSardinescommented, Jul 11, 2022

@Deja-vuuu I simply ran npm i sharp. I’m not really sure what that did exactly

4reactions

PumpedSardinescommented, Jul 1, 2022

I’ve gotten the same error. This only happens with images that are very wide for me. When I cropped my image to a more squarish shape, next could build. Not sure what’s causing this

Update: installing sharp solved the issue for me. Not sure why

Top Results From Across the Web

Unwrap_throw failed error on png import? : r/nextjs - Reddit

Hello all, I am trying to import a png which is stored at “public/assets/x.png” into my .tsx file. I have tried importing the...

Build Error on importing images with react - Stack Overflow

I think it's due to image relative path issue, can you try the below methods. Simple method you should follow, see here for...

Simulator fails to import data - X… | Apple Developer Forums

So if I drag and drop a simple jpg photo which normally would appear in the Photos App I get the following error:...

Importing Assets Directly into Files - Gatsby

If you make a typo or accidentally delete an important file, you will see a compilation error, just like when you import a...

Re: Photo Management / Import Pictures

... Import Pictures and then follow the process for importing student photos, I receive the message: "440 failure(s) Failure Details Failed to find...