Elindo Posted May 11, 2022 Posted May 11, 2022 This codepen is working great... But I am trying to move it to a website using Next.js and it isn't working anymore..... Would anybody know how to fix this working with Next.js? It is giving me this error: Server Error TypeError: Cannot read properties of undefined (reading 'querySelectorAll') This error happened while generating the page. Any console logs will be displayed in the terminal window. Source pages\interactive.js (12:2) @ Interactive 10 | let isButtonBDisabled = true; 11 | > 12 | gsap.set("#A1, #A2, #B1, #B2, #P, #Solb, #Sola", { opacity: 0 }); | ^ 13 | gsap.set("#A, #B, #Stop, #Start", { opacity: 0.7 }); 14 | 15 | function stagea1() { The previous REACT-app (which was working just fine) code is here: https://github.com/Elindo586/techunion/blob/main/client/src/pages/Interactive.js The current not working code for Next.js is here: https://github.com/Elindo586/nextprojecta/blob/main/pages/interactive.js TypeError: Cannot read properties of undefined (reading 'querySelectorAll') at toArray (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\gsap\dist\gsap.js:621:106) at new Tween (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\gsap\dist\gsap.js:2911:130) at Object.set (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\gsap\dist\gsap.js:3325:14) at Interactive (webpack-internal:///./pages/interactive.js:26:49) at renderWithHooks (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5471:16) at renderIndeterminateComponent (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5544:15) at renderElement (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5759:7) at renderNodeDestructive (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5898:11) at renderNode (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6030:12) at renderChildrenArray (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5986:7) error - TypeError: Cannot read properties of undefined (reading 'querySelectorAll') TypeError: Cannot read properties of undefined (reading 'querySelectorAll') at toArray (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\gsap\dist\gsap.js:621:106) at new Tween (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\gsap\dist\gsap.js:2911:130) at Object.set (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\gsap\dist\gsap.js:3325:14) at Interactive (webpack-internal:///./pages/interactive.js:26:49) at renderWithHooks (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5471:16) at renderIndeterminateComponent (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5544:15) at renderElement (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5759:7) at renderNodeDestructive (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5898:11) at renderNode (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6030:12) at renderChildrenArray (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5986:7) error - TypeError: Cannot read properties of undefined (reading 'querySelectorAll') See the Pen ZEyOJOg by Elindo586 (@Elindo586) on CodePen.
OSUblake Posted May 11, 2022 Posted May 11, 2022 Hi Elindo, Please check out our React guide. GSAP is not going to be able to find any elements before the component has rendered. All GSAP code needs be inside an effect or some other function is called after the component has been rendered. 1
Elindo Posted May 11, 2022 Author Posted May 11, 2022 Has this been a change within the last month? So the code is working good in a typical REACT app.. running good in REACT here ( http://www.tu.biz/Interactive) The same code doesn't seem to work when placing it in a Next.js application.
OSUblake Posted May 11, 2022 Posted May 11, 2022 I'm not sure what you mean, but those gsap.set calls are 100% wrong in React, and Next.js is just React. The error might be a little different in next.js because it uses SSR, so there is no document when those calls are made. Put those calls inside an effect, just like the guide shows, and you should be good. If not, please provide a minimal demo of the issue. You can use Codesandbox for next.js.
Elindo Posted May 11, 2022 Author Posted May 11, 2022 I think.... the problem is that I am calling part of the working logics before the entire SVG gets to be render... Being a not so great coding guy, I need learn/digest/ the UseEffect and the links you gave me... HOWEVER, with Nextjs there might be (I think) quicker solution other than adding more code... Maybe I can get away with just using "next/script" tags... if it happens to work, the logics would come after the SVG is loaded. I would let know about this next failure? __________________________________________ On the other hand the short code problem so I think is that next.js doesnt know what "gsap" is in the code.. const GreenSock = () => { The green sock logics return( the svg stuff) }; export default GreenSock; The problem comes right as soon as you call gsap in here: import React from "react"; import gsap from "gsap"; const GreenSock = () => { let animation; let isButtonADisabled = true; let isButtonBDisabled = true; gsap.set("#A1, #A2, #B1, #B2, #P, #Solb, #Sola", { opacity: 0 }); // ^^^ problem right there
OSUblake Posted May 11, 2022 Posted May 11, 2022 7 minutes ago, Elindo said: The problem comes right as soon as you call gsap in here: Again, go through that React guide. It will not be problem once you put those calls inside an effect.
Elindo Posted May 11, 2022 Author Posted May 11, 2022 Hey! So I got all of the javascript from GS in an UseEffect like this: Const = GreenSock = () => { useEffect (() => { "here goes all of the GS javascript}), []; ^^^ With this I get no more errors from the javascript part.... But how do I fix something liKe "btnstop is not defined" calling a function from the javascript inside the SVG? "btnstop" is a function from the javascript which is included in the useEffect section above. Now I continue to the return part to include the SVG and all the text divs... return ( <div> all of the SVG stuff go in here.. line 938 <g id="Stop" onClick={btnstop}> ... more stuff </div> ) };
OSUblake Posted May 11, 2022 Posted May 11, 2022 I can't say without seeing what you're doing. Please make a minimal demo of your issue on CodeSandbox.
Elindo Posted May 12, 2022 Author Posted May 12, 2022 The minimum demo would be this: <g id="Stop" onClick={btnstop} ^^^ this is now going into the SVG document inside the return() section of the component creation in next.js Tje error is btnstop is not defined
GSAP Helper Posted May 12, 2022 Posted May 12, 2022 When Blake requests a minimal demo, he doesn't mean a copy/paste of one line of code - he means a CodePen or CodeSandbox that illustrates the problem in context (so we can see the error being thrown). The issue could be caused by markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. Here's a React starter template. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.
Elindo Posted May 12, 2022 Author Posted May 12, 2022 Ok... I am trying to use the codesandbox template. Link here: objective-torvalds-tw3k9k - CodeSandbox Would you happen to now why I am getting a syntax error? Basically what I did was this on the template: import React, { useEffect, useRef } from "react"; import { gsap } from "gsap"; import "./styles.css"; export default function App() { const boxRef = useRef(); useEffect(() => { gsap.to(boxRef.current, { All the logics goes here }); }); return ( <div className="app"> <div className="col-md-6" ref={boxRef}> Here goes the SVG stuff </div> </div> ); }
OSUblake Posted May 12, 2022 Posted May 12, 2022 You have invalid JavaScript right on the very first line. And if you're trying to calling to that btnstop function in the onClick, that will not work. That's just basic JavaScript. You cannot call a nested function. function outer() { function inner() { console.log("hello"); } } inner(); // error And please go through that React guide. This is not recommended. useEffect(() => { ... });
Elindo Posted May 12, 2022 Author Posted May 12, 2022 Well... That was the GSAP template from here https://codesandbox.io/s/gsap-react-starter-ut42t?file=/src/App.js:0-368 import React, { useEffect, useRef } from "react"; import { gsap } from "gsap"; import "./styles.css"; export default function App() { const boxRef = useRef(); useEffect(() => { gsap.to(boxRef.current, { rotation: "+=360" }); }, []); return ( <div className="app"> <div className="box" ref={boxRef}> Hello </div> </div> ); } Now... I just got the entire logics inside the template and replaced "rotation..." wtih "let animation;" which is the first line of the entire code... I think.... I am going to use the useEffect specifically on the problems items...
Solution OSUblake Posted May 12, 2022 Solution Posted May 12, 2022 13 minutes ago, Elindo said: Well... That was the GSAP template from here Your effect did not have an empty array at the end. 15 minutes ago, Elindo said: I think.... I am going to use the useEffect specifically on the problems items... Please, just go through the React guide. 1
Elindo Posted May 12, 2022 Author Posted May 12, 2022 This was solved by simply wrapping this section in a useEffect() like this. useEffect(() => { gsap.set("#A1, #A2, #B1, #B2, #P, #Solb, #Sola", { opacity: 0 }); gsap.set("#A, #B, #Stop, #Start", { opacity: 0.7 }); }, []);
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