react-sticky-el
react-sticky-el copied to clipboard
Cannot read property "matches" of null
I have built a mobile app using this package, and once the initial page loads, it stops loading React at all. It is working when being tested on browsers though and I am not sure why.
Here's the error message:
Uncaught TypeError: Cannot read property 'matches' of null at 8bcfc8fa89c28c35a39b548a5b71ab733021a6e9.js?meteor_js_resource=true:formatted:60347 at find.js (8bcfc8fa89c28c35a39b548a5b71ab733021a6e9.js?meteor_js_resource=true:formatted:60349) at g (8bcfc8fa89c28c35a39b548a5b71ab733021a6e9.js?meteor_js_resource=true:formatted:592) at d.n [as require] (8bcfc8fa89c28c35a39b548a5b71ab733021a6e9.js?meteor_js_resource=true:formatted:742) at e (8bcfc8fa89c28c35a39b548a5b71ab733021a6e9.js?meteor_js_resource=true:formatted:561) at sticky.js (8bcfc8fa89c28c35a39b548a5b71ab733021a6e9.js?meteor_js_resource=true:formatted:59986) at g (8bcfc8fa89c28c35a39b548a5b71ab733021a6e9.js?meteor_js_resource=true:formatted:592) at d.n [as require] (8bcfc8fa89c28c35a39b548a5b71ab733021a6e9.js?meteor_js_resource=true:formatted:742) at e (8bcfc8fa89c28c35a39b548a5b71ab733021a6e9.js?meteor_js_resource=true:formatted:561) at index.js (8bcfc8fa89c28c35a39b548a5b71ab733021a6e9.js?meteor_js_resource=true:formatted:59949)
Here's line 60349 in bold
if ("undefined" != typeof document) { var e = document.body; return "function" == typeof e.matches ? "matches" : "function" == typeof e.webkitMatchesSelector ? "webkitMatchesSelector" : "function" == typeof e.mozMatchesSelector ? "mozMatchesSelector" : "function" == typeof e.msMatchesSelector ? "msMatchesSelector" : "function" == typeof e.oMatchesSelector ? "oMatchesSelector" : null }
@dsmalicsi @gm0t I ran into this same issue and it looks like it's due to the code being loaded before the body of the DOM is ready. This problem persists even if you wrap it in event listener for DOMContentLoaded because this part of the code runs immediately when the module itself is loaded. https://github.com/gm0t/react-sticky-el/blob/master/src/helpers/find.js#L10
A work around would be to include the script closer to the end of the html document (namely outside the head tag) but it may be better to only trigger this part of the code when the <Sticky> element is rendered? thoughts?