Jump to content
Search Community

Gatsby issue(on reload) - The page didn't server render (SSR) correctly

bujutsu1 test
Moderator Tag

Recommended Posts

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

  • bujutsu1 changed the title to Gatsby issue(on reload) - The page didn't server render (SSR) correctly

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:

  1. 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.
  2. 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!!!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...