I added Flatpickr to my project which has been working perfectly fine, however when checking in mobile view I get the following error when clicking on the input to open the calendar:
Uncaught DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet
I have trawled through SO and google to try and find a solution, but nothing seems to work. I have tried the solution proposed in this thread but my project is using styled-components, which means I do not have a stylesheet to import. However I tried adding the import in my styled-component, I also tried adding a stylesheet which I imported in _app.tsx.
By playing with the responsive mode, I have noticed that the error activates when the screen width drops bellow 392px. Anything bigger than that and it all works perfectly fine.
I have opted for a temporary solution whereby on mobile I display the native inputs as opposed to the Flatpickr, as this seems to offer a better user experience. Additionally the Flatpickr doc seems to indicate that this is what they do also, so I am thinking that this error is due to that as I was hijacking the CSS in _app.js