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.

lqip error: Input file is missing or of an unsupported image format lqip v2.1.0

See original GitHub issue

Hello. I’m not able to make lqip work with dynamic requires.

const src = 'image.png'

...
<img
   alt={`${alt}-placeholder`}
   src={require(`../../assets/images/${src}?lqip`)}
   style={{ ...style, filter: 'blur(7px)' }}
 />

ends up with following error:

> Using external babel configuration
> Location: "/Users/../web/.babelrc"
Error: Input file is missing or of an unsupported image format lqip v2.1.0
Error: Input file is missing or of an unsupported image format lqip v2.1.0
Error: Input file is missing or of an unsupported image format lqip v2.1.0
Error: Input file is missing or of an unsupported image format lqip v2.1.0
Error: Input file is missing or of an unsupported image format lqip v2.1.0
Error: Input file is missing or of an unsupported image format lqip v2.1.0
Error: Input file is missing or of an unsupported image format lqip v2.1.0
Error: Input file is missing or of an unsupported image format lqip v2.1.0
Error: Input file is missing or of an unsupported image format lqip v2.1.0
Creating an optimized production build ./Users/../web/node_modules/lqip/index.js:76
  throw up;
  ^

ReferenceError: err is not defined
    at /Users/sebastian/../web/node_modules/lqip-loader/index.js:80:16
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

For webp-loader (or without ?lqip suffix), dynamic require works just fine.

Any suggestions please?

Thanks!

Issue Analytics

State:
Created 3 years ago
Reactions:3
Comments:5

Top GitHub Comments

2reactions

Sowedcommented, Jun 12, 2020

@sebqq, I think there is a typo at that referenced line 80:16.

at /Users/sebastian/../web/node_modules/lqip-loader/index.js:80:16

The path resolved from the temperate literal might be incorrect, pointing to a missing file. When importing with require, the loader breaks whilst catching the error, and breaks the build too so it’s hard to trace the failure in your file.

I forked the repo and ran the build against it, the build caught the error in my path (was using absolute instead of relative paths for the require), fixed it and it’s all good. Until @zouhir, fixes it of course. 🙂

0reactions

MejanHcommented, Jul 13, 2020

Finally found the problem. In my markdown, my cover image name was ‘/images/test.jp’ which lqip-loader didn’t support. When I changed the cover string to only ‘test-jp’ and updated the index page image location it worked. you can only return filename with variable not location.

Top Results From Across the Web

I deployed my project, I am getting this error Input file contains ...

I deployed my project, I am getting this error Input file contains unsupported image format · Ask Question. Asked 1 year, 2 months...

Error "gatsby-plugin-manifest" Input file contains unsupported ...

I'm getting an unsupported image error when trying to deploy my Gatsby site to Netlify. The error is from the gatsby-plugin-manifest, see screenshot...

Testing Sharp With Memfs Error: [Error: Input File Is Missing]

web/.babelrc Error: Input file is missing or of an unsupported image format lqip v2.1.0 Error:. Manipulate images using the #Node.js library ...

Optimize Images | Cloudinary

What is image optimization? Optimizing an image involves delivering images in the format, dimensions, resolution, and quality that will yield ...

Input file contains unsupported image format might be a race ...

Nodejs sharp error - Input file contains unsupported image format might be a race condition. Was doing some S3 work where I had...