Exceptions relating to media queries

Hi 👋🏼 Super stoked to see a polyfill for this! Thanks for your work 😄

I wanted to try this out on a Docusaurus page for a custom component, but when loading the polyfill, I get the following two errors:

Uncaught DOMException: Element.matches: '@media (min-width: 1440px) ' is not a valid selector cqfill.js:130

Uncaught (in promise) DOMException: Document.querySelectorAll: '@media (min-width: 1440px) ' is not a valid selector cqfill.js:204

I’m not entirely sure what’s going on, but it seems to me that @media[...] gets picked up as a rule and that it breaks some queries. That said, I may very well be doing something wrong. This happens both in Firefox 96 and in Chrome 97.

Do you have any ideas about what may be going wrong and/or how I can fix it?

Thanks for any input!

[devknoll]

This issue should be fixed by the latest version of the polyfill (currently in alpha). Let me know if you run into any further problems and I’d be happy to reopen the issue.

Thank you!

[RodrigoTomeES]

I have the same issue, I am using the last version of the polyfill, v.0.1.2 and I am getting the error -> Document.querySelectorAll: '@media (min-width: 375px) ’ is not a valid selector

I am using React v17.0.2 and NextJS 12.1.0.

I add the import in useEffect inside the _app file