question-mark
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.

The file given is not an instance of Blob or File with v2.0.0 on Next.js

See original GitHub issue

As of v2.0.0, your Next.js example appears to only work when you start Next.js in development mode, not production. Could this be related to core-js being dropped?

The docs say this polyfill is for IE only, but this issue affects Next.js on the latest version of Chrome, Firefox, and Safari.

yarn dev

Screenshot from 2022-04-29 11-12-18

yarn start

Screenshot from 2022-04-29 10-53-06

Here’s a temporary fix for anyone looking for it:

yarn add browser-image-compression@1.0.13 --exact

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:6
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
3c1ucommented, Sep 6, 2022

It seems that the problem was fixed in newer Next.js versions (i.e. this was just a Next.js/swc issue, not browser-image-compression).

To reproduce, downgrade Next.js to v12.1.5 or v12.1.6. I used the exact same example found in here.

0reactions
Donaldcwlcommented, Aug 28, 2022

@3c1u I just tested browser-image-compression@2.0.0 on react@18.2.0, next@12.2.5 with swcMinify enable (true). I can’t reproduce the issue. Could you share your source code that has the issue?

The nextjs source code I tested can be found here: https://github.com/Donaldcwl/browser-image-compression/tree/master/example/Nextjs App

Read more comments on GitHub >

github_iconTop Results From Across the Web

Presence of middleware prevents access to raw request ...
I verified that the issue exists in the latest Next.js canary release ... Of note, very small request bodies (e.g. < 1kb files)...
Read more >
Blob in NextJs for images - node.js - Stack Overflow
Ty for answer error message gone but still image is not displaying. I create image as Blob because I dont want anyone parse...
Read more >
Advanced Features: Output File Tracing - Next.js
Next.js automatically traces which files are needed by each page to allow for easy deployment of your application. Learn how it works here....
Read more >
Blob - The Modern JavaScript Tutorial
To transform a Blob into base64, we'll use the built-in FileReader object. It can read data from Blobs in multiple formats. In the...
Read more >
Quickstart: Azure Blob Storage client library for Node.js
In this quickstart, you learn how to use the Azure Blob Storage for JavaScript to create a container and a blob in Blob...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found