[next/image] Breaks on old Safari with `sizes` & `layout=fill

nandorojo commented 3 years ago

What version of Next.js are you using?

10.2.0

What version of Node.js are you using?

v14.15.5

What browser are you using?

Safari (12 or lower)

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

next/image breaks on versions of Safari below 13. I confirmed this using lambdatest.com.

My website uses next/image. If you use an older version of Safari, it throws an error, saying n.matchAll is not a function. We've had users experiencing this.

Peaking at next's code, the error is here

When that code gets compiled into chunks, it turns into this:

if (n && ('fill' === t || 'responsive' === t)) {
  // this is where the error is! n.matchAll is not a function
  var i = o(n.matchAll(/(^|\s)(1?\d?\d)vw/g)).map(function(e) {
    return parseInt(e[2])
  }) 

// etc...

Expected Behavior

next/image should work on old browsers, or have a fallback.

Older browsers don't support string.prototype.matchAll, which is used in next's compiled code.

I would expect next/image to polyfill n.matchAll, or for the compiled code to support older browsers somehow.

To Reproduce

Here's a file I made, forking the next example: https://github.com/nandorojo/next.js/blob/canary/examples/image-component/pages/layout-fill.js

It's deployed here.

Open a website with next/image on Lambda Test, and select Safari 12 or lower. Or, if you can somehow downgrade your Safari, you do that.
Make layout fill or responsive
Add a sizes prop to <Image />
Use a remote URL as the src, not a local image

The deployed URL I used above will suffice for lambda test.

timneutkens commented 3 years ago

This has been fixed already on next@canary.

balazsorban44 commented 2 years ago

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

vercel / next.js