Issue with <Image /> component in old versions of Chrome

[jpkempf]

Run next info (available from version 12.0.8 and up)

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.3.0: Wed Jan  5 21:37:58 PST 2022; root:xnu-8019.80.24~20/RELEASE_X86_64
Binaries:
  Node: 16.13.1
  npm: 8.3.0
  Yarn: 1.22.17
  pnpm: N/A
Relevant packages:
  next: 12.0.10
  react: 17.0.2
  react-dom: 17.0.2

What version of Next.js are you using?

12.0.10

What version of Node.js are you using?

16.13.1

What browser are you using?

Chrome/65.0.3325.181, Chrome/68.0.3440.84

What operating system are you using?

MacOS 12.2, Windows 10

How are you deploying your application?

Custom Docker container running in Azure

Describe the Bug

I have the misfortune of having to support a number of very old Chrome versions (65 and 68 currently) on a project that uses Next.js. We are currently running Next.js version 11.1.3 in production without issue but would like to upgrade to Next.js 12.

I've already successfully jumped through some other hoops in order for that to work and was about to merge our upgrade branch when I stumbled upon an additional issue. The next/image component in version 12 is using the PerformanceObserver API in a way that does not work in a Chrome version this old—attempting to display an <Image /> on any page throws the below error:

Failed to execute 'observe' on 'PerformanceObserver': required member entryTypes is undefined

I have found this W3C discussion that tells me (if I'm reading it right) this issue is fixed in newer browser versions, but it still affects mine. I have also seen issue #30322 which comes close to my problem but does not quite fix it.

Based on the comments in that issue, my current workaround for the problem is a custom hook that mocks the PerformanceObserver API in any component where this is required, and restores it afterwards.

I don't know whether there's anything that can or should be done about this issue, but I wanted to at least raise awareness of it.

Expected Behavior

I would expect the <Image /> component to render properly instead of throwing an error, even when the PerformanceObserver API is not fully supported.

To Reproduce

This should work in recent browsers and fail in Chrome 65:

https://stackblitz.com/edit/nextjs-6nehqb?file=pages%2Findex.js

[balazsorban44]

This should have already been addressed in #30387, introduced in 12.0.1 🤔.

[balazsorban44]

I just checked, and my deployed version at https://34062.vercel.app loads the image and does not reproduce what you are describing:

Make sure you are actually trying a version 12.0.1 or above, otherwise I'll need a deployed URL I could verify.

Note: opening StackBlitz itself in Chrome 65 fails because it does not support that.

[jpkempf]

This should have already been addressed in #30387, introduced in 12.0.1 🤔.

#30387 only checks whether the API exists at all, but in case it does it assumes full functionality. In my case, the problem is that the API exists but is not functional in the way the callee expects. Hence the error message: Failed to execute 'observe' on 'PerformanceObserver': required member entryTypes is undefined.

[jpkempf]

I just checked, and my deployed version at https://34062.vercel.app loads the image and does not reproduce what you are describing:

Make sure you are actually trying a version 12.0.1 or above, otherwise I'll need a deployed URL I could verify.

Note: opening StackBlitz itself in Chrome 65 fails because it does not support that.

Thanks for going to the trouble and sorry StackBlitz didn't work as I intended! That is interesting to hear that it works for you. I've just reconfirmed in my environment that the repro still produces the error.

The problem might not be with the "normal" version of Chrome, but with the build that I am running in this project. What I'm actually dealing with is a version of CefSharp running as a modal window inside native applications written in C++ and C#. There may differences in the browser engine that are not obvious from the user agent alone.

This also means it is not possible for me to offer an exact, web-based reproduction of the issue, since my runtime environment is rather unusual. I can only describe what I am observing.

Edit: I did make extra sure I'm running Next.js version 12.0.10. 🙂

[balazsorban44]

Next.js supports IE11 and all modern browsers (Edge, Firefox, Chrome, Safari, Opera, et al) with no required configuration.

https://nextjs.org/docs/basic-features/supported-browsers-features

So yes, CefSharp might fall out of direct support. I wonder if adding a polyfill would be enough in your use case then, as you are already doing. Is there a drawback with that solution?

Otherwise, I see that CefSharp have support for much newer Chrome versions: https://github.com/cefsharp/CefSharp/#release-branches

Are you able to upgrade?

If you could give me some minimal steps on how to reproduce the issue with your runtime, I could try to give it a go.

[jpkempf]

There isn't really a list of "minimal" steps—you would basically have to set up a development environment similar to the one I am using, which requires quite some effort. If you are truly interested, then I would be happy to try and arrange a call for walking you through the behaviour I've described, but this is certainly not something I would expect anyone to be willing to do.

Sadly, the version of CefSharp that is in use depends on whichever version the vendor of the software embedding the browser chooses to go with, and for that reason we are stuck with these old versions in my project. Even if a new version of the software were to get released that uses a newer version of CefSharp, my project would still be obliged to support the older versions for the foreseeable future.

The crude polyfill I have in place is working for now; there are no drawbacks to my use case that I can see. The only problem I can think of is if the image component were to rely more on the output of PerformanceObserver in the future, in which case I might have to spend more effort on mocking the observer's methods and their responses.

I am well aware that my issue is an extreme edge case, and I would not hold it against anyone if they closed this issue. 😅

[balazsorban44]

I understand. Unfortunately, I cannot give any guarantees that newer APIs won't be leveraged more in the future, but we generally try to add very little breaking changes over time. Maybe #33227 might help in the future, that would let you utilize Browserslist to transform the code as you wish, potentially including the polyfill for your target automatically.

Another option is https://github.com/fastly/performance-observer-polyfill

I'm going to close this for now then. 👍

[neeraj3029]

The reason behind this issue is:
PerformanceObserver spec either requires entryTypes inside argument, or type and buffered both (https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver/observe#parameters).
However, some older browsers do not acknowledge it and throw error when entryTypes is not provided.

[hsneeraj]

I just checked, and my deployed version at https://34062.vercel.app loads the image and does not reproduce what you are describing:

Make sure you are actually trying a version 12.0.1 or above, otherwise I'll need a deployed URL I could verify.

Note: opening StackBlitz itself in Chrome 65 fails because it does not support that.

Hi @balazsorban44 , the reason works as PerformanceObserver does not run in production env. https://github.com/vercel/next.js/blob/canary/packages/next/client/image.tsx#L398

[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.