bujutsu1 Posted March 21, 2021 Share Posted March 21, 2021 Hi all! i am quite new to react and gatsby and i started my first project using gsap. I get this weird error wich i really don't know how to fix (see below)... .. and it doesn't happen when i just switch to the page after starting the server. It happens when i reload the page! anyone? Thanks already!! The page didn't server render (SSR) correctly React components in Gatsby must render successfully in the browser and in a node.js environment. When we tried to render your page component in node.js, it errored. URL path: / File path: node_modules/gsap/gsap-core.js error Cannot read property 'querySelectorAll' of undefined 626 | //takes any value and returns an array. If it's a string (and leaveStrings isn't true), it'll use document.querySelectorAll() and convert that to an array. It'll also accept iterables like jQuery objects. 627 | toArray = function toArray(value, leaveStrings) { > 628 | return _isString(value) && !leaveStrings && (_coreInitted || !_wake()) ? _slice.call(_doc.querySelectorAll(value), 0) : _isArray(value) ? _flatten(value, leaveStrings) : _isArrayLike(value) ? _slice.call(value, 0) : value ? [value] : []; | ^ 629 | }, 630 | shuffle = function shuffle(a) { 631 | return a.sort(function () { Link to comment Share on other sites More sharing options...
Rodrigo Posted March 21, 2021 Share Posted March 21, 2021 Hi and welcome to the GreenSock forums. This most likely has to do with some part of your code running on the server, most specifically a GSAP code. My guess is that you're using regular selectors like ".my-class" or "#myId" in your GSAP instances. In that case GSAP runs the code you posted and that tries to access the document object. Since neither the document or window object are found in server side rendering, the build process is returning such error. There are two ways to solve this: Use refs instead of regular selectors. Even with these type of libraries (Gatsby, Next, Nuxt, VuePress, Gridsome, Sapper, etc.) generating static content, they still abide to the rules of the framework they are based on, so you can use all the tools provided by them. I'd recommend you to get a bit more familiar with React and Gatsby regarding refs and DOM content. Keep using regular selectors ONLY if your site content is 100% static and never changes. From the moment the content in one of your pages becomes dynamic, you'll have to use refs and cleanup to avoid errors. If you choose this route, then you add to your code a little conditional block to check if the document and/or window object do exist: if (typeof document === "undefined") return; gsap.to(".my-class", {/* Config Code Here */}); Finally, if possible please provide a small code snippet from your project or a reduced editable sample in codesandbox. That makes debugging simpler and faster. Happy Tweening!!! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now