addEventListener on window.matchMedia("(prefers-color-scheme: dark)") undefined on Safari 13 and earlier

[nathandaven]

What version of Next.js are you using?

11.1.0

What version of Node.js are you using?

16.6.2

What browser are you using?

Safari 13

What operating system are you using?

iOS

How are you deploying your application?

Vercel, npm run dev

Describe the Bug

on iOS 13 Safari 13, using window.matchMedia("(prefers-color-scheme: dark)").addEventListener instead of window.matchMedia("(prefers-color-scheme: dark)").addListener (now deprecated) causes an error on Safari 13 that causes a client side error

Expected Behavior

Event listener should work as expected, using deprecated addListener fixes the issue.

To Reproduce

Create an event listener on prefers color scheme using addEventListener, ex:

window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function () { /* code */ });

[TechQuery]

Cause of deprecated standard: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener

[icyJoseph]

OP's comment says that, they used:

window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function () { 
      /* code */ 
});

And that failed. They meant that, they were trying to change from addListener to addEventListener, and they encountered an issue. Most likely cuz their TypeScript version was showing addListener as deprecated.

The reason it fails is that in iOS 13, the MediaQueryList change event was not supported, https://caniuse.com/mdn-api_mediaquerylist_change_event - it gained support on iOS 14.

People usually did a "presence" check like:

const mql = window.matchMedia(v.media)
if (mql.addEventListener) {
  mql.addEventListener(`change`, /* callback */)
} else {
// Deprecated 'MediaQueryList' API, <Safari 14, IE, <Edge 16
  mql.addListener(/* callback */)
}

I've seen many variations of this.