Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useMediaQuery: unsupported query throw exception t.addEventListener is not a function #1580

Open
rawpixel-vincent opened this issue Jan 4, 2025 · 0 comments · May be fixed by #1581
Open

Comments

@rawpixel-vincent
Copy link

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @react-hookz/[email protected] for the project I'm working on.

on safari 13, mql is undefined, and an error is thrown t.addEventListener is not a function, will PR

Here is the diff that solved my problem:

diff --git a/node_modules/@react-hookz/web/dist/useMediaQuery/index.js b/node_modules/@react-hookz/web/dist/useMediaQuery/index.js
index e7b8dd3..495607e 100644
--- a/node_modules/@react-hookz/web/dist/useMediaQuery/index.js
+++ b/node_modules/@react-hookz/web/dist/useMediaQuery/index.js
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { isBrowser } from '../util/const.js';
 const queriesMap = new Map();
 const createQueryEntry = (query) => {
+  try {
     const mql = matchMedia(query);
     const dispatchers = new Set();
     const listener = () => {
@@ -15,6 +16,21 @@ const createQueryEntry = (query) => {
         dispatchers,
         listener,
     };
+  } catch (e) {
+    return {
+        mql: {
+            matches: false,
+            addEventListener: undefined,
+            removeEventListener: undefined,
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            addListener: () => { },
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            removeListener: () => { },
+        },
+        dispatchers: new Set(),
+        listener: () => { },
+    };
+  }
 };
 const querySubscribe = (query, setState) => {
     let entry = queriesMap.get(query);

This issue body was partially generated by patch-package.

@rawpixel-vincent rawpixel-vincent changed the title useScreenOrientation: on safari 13, mql is undefined, and an error is thrown t.addEventListener is not a function useMediaQuery: unsupported query throw exception t.addEventListener is not a function Jan 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
1 participant