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

useScreenOrientation: on safari 13, mql is undefined, and an error is thrown t.addEventListener is not a function #1580

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

Comments

@rawpixel-vincent
Copy link

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @react-hookz/web@25.0.1 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
1 participant