useBreakpoint throws TypeError: queryList.addEventListener is not a function

[MoistJohn]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

Vite

What browsers are you seeing the problem on?

Chrome, Safari

Which region are you seeing the problem in?

No response

Please describe your bug.

Using these dependencies:

"dependencies": {
    "@aws-amplify/ui-react": "^6.1.0",
    "@vitejs/plugin-legacy": "^5.3.0",
    "aws-amplify": "^6.0.10",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "terser": "^5.27.0",
    "typescript": "^5.3.3",
    "vite": "^5.0.11"
  },

With this vite configuration:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import legacy from "@vitejs/plugin-legacy";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), legacy()],
  build: {
    minify: false,
  },
  base: "./",
});

When running on older iOS devices:

• iPhone 11
• iPhone 11 Pro Max
• iPhone XR
• iPad mini
• iPad Air

an error TypeError: queryList.addEventListener is not a function. (In 'queryList.addEventListener("change", handleMediaChange)', 'queryList.addEventListener' is undefined) is thrown when trying to render <Authenticator>

What's the expected behaviour?

The Authenticator component should support older devices.

Help us reproduce the bug!

Attempt to render the component on any of the following, with Safari or Chrome

• iPhone 11
• iPhone 11 Pro Max
• iPhone XR
• iPad mini
• iPad Air

Code Snippet

// Put your code below this line.
export function App() {
  const { authStatus, signOut } = useAuthenticator((context) => [
    context.authStatus,
  ]);

  return (
    <Authenticator hideSignUp={true}>
        <InternalElement/>
    </Authenticator>
}

The following snippet is the un-minified compiled JS code of the useBreakpoint hook that the Authenticator uses:

const useBreakpoint = ({ breakpoints: breakpoints2, defaultBreakpoint }) => {
  const supportMatchMedia = typeof window !== "undefined" && typeof window.matchMedia !== "undefined";
  const matchMedia = supportMatchMedia ? window.matchMedia : null;
  const mediaQueries = reactExports.useMemo(() => getMediaQueries({ breakpoints: breakpoints2 }), [breakpoints2]);
  const [breakpoint, setBreakpoint] = reactExports.useState(defaultBreakpoint);
  const updateBreakpoint = reactExports.useCallback((matches2, breakpoint2) => {
    if (matches2) {
      setBreakpoint(breakpoint2);
    }
  }, [setBreakpoint]);
  useIsomorphicEffect(() => {
    if (!matchMedia)
      return;
    const unsubscribeList = mediaQueries.map(({ query, breakpoint: breakpoint2 }) => {
      const queryList = matchMedia(query);
      updateBreakpoint(queryList.matches, breakpoint2);
      const handleMediaChange = (event) => {
        if (event.matches) {
          setBreakpoint(breakpoint2);
        }
      };
      queryList.addEventListener("change", handleMediaChange);  // <=== This throws the error
      return () => queryList.removeEventListener("change", handleMediaChange);
    });
    return () => {
      unsubscribeList.forEach((unsubscribe) => unsubscribe());
    };
  }, [breakpoints2, setBreakpoint, matchMedia, mediaQueries]);
  reactExports.useDebugValue(breakpoint, (breakpoint2) => breakpoint2);
  return breakpoint;
};

When I changed the snippet with the following, the component seems to work:

      if (typeof queryList.addListener === 'function') {
        queryList.addListener(handleMediaChange);
      } else {
        queryList.addEventListener("change", handleMediaChange);
      }
      return () => {
          if (typeof queryList.removeListener === 'function') {
              queryList.removeListener(handleMediaChange);
          } else {
            queryList.removeEventListener("change", handleMediaChange);
          }
      }

Console log output

TypeError: queryList.addEventListener is not a function. (In 'queryList.addEventListener("change", handleMediaChange)', 'queryList.addEventListener' is undefined)

Additional information and screenshots

No response

[esauerbo]

Hi @MoistJohn thanks for creating this issue. I'm looking into this and will try to reproduce the behavior.

[esauerbo]

@MoistJohn which version of Safari/chrome are you seeing this error with, and which iOS?

[hbuchel]

Hi @MoistJohn since addListener() is deprecated for major browsers and they have supported addEventListener as used in our use case for quite some time now (in Safari, at least 4 years since from what I can find) we don't have plans on adding support for this.

[Oram]

To anyone struggling, this monkey patching solved the problem:

const originalMatchMedia = window.matchMedia;
window.matchMedia = (query) => {
  const originalResults = originalMatchMedia(query);
  if (!originalResults.addEventListener) {
    originalResults.addEventListener = (type, callback) => {
      return originalResults.addListener(callback);
    };
  }
  if (!originalResults.removeEventListener) {
    originalResults.removeEventListener = (type, callback) => {
      return originalResults.removeListener(callback);
    };
  }
  return originalResults;
};