-
-
Notifications
You must be signed in to change notification settings - Fork 63
-
-
Notifications
You must be signed in to change notification settings - Fork 63
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ReferenceError: window is not defined - NextJS #172
Comments
I had a lot of trouble figuring it out. Along with "use client" on top what worked for me was: on pages/index.tsx
on graph.tsx
|
@thobhanifreddy I appreciate the reply very much. Can you provide the full Additionnally, I'm using the App Router of NextJS, you seem to be on the Page Router. I wonder how that could be impactful. Are you also on Cheers |
The last bit to get this working is update |
Very cool! I don't believe I saw anything in the documentation, but is there a temporary workaround prop where we could already disable the keyboard shortcuts? |
@iAMkVIN-S - Unfortantly not since this is a compile time issue. |
I have just started a fresh NextJS 14 project and I am having the same issue above, and I'm unable to solve it using the soln provided above probably because of the different NextJS versions. From what I am getting from this thread, NextJS 14 is currently not supported by this library, but it will be updated soon in the meantime there is currently no workaround other than downgrading the NextJS version correct? This library looks so good I will definitely wait for the time when version 14 is supported. Could you provide a time estimate in which this will be done? |
@stephen-ip - Planning to have solved in the next week to two. If you need this faster, we have proffesional support options or we are happy to accept a PR for the fix. |
This should be solved now. Please try again on latest. |
@amcdnl I'm running nextjs 14.1.0 with "reagraph": "^4.17.0" and I'm getting: Error in worker registerModule call: window is not defined This is my code (when uncommenting dynamic import errors are gone but nothing shows on the screen - canvas is missing): 'use client'
import { GraphCanvas } from 'reagraph'
// const GraphCanvas = dynamic(
// import('reagraph').then((mod) => mod.GraphCanvas),
// { ssr: false },
// )
const nodes = [
{
id: '1',
label: '1',
},
{
id: '2',
label: '2',
},
]
const edges = [
{
source: '1',
target: '2',
id: '1-2',
label: '1-2',
},
{
source: '2',
target: '1',
id: '2-1',
label: '2-1',
},
]
function ComputeGraphCanvas() {
return <GraphCanvas nodes={nodes} edges={edges} />
}
export default ComputeGraphCanvas |
@avalanche-tm did you find a workaround? |
@gkorland unfortunately no. I decided to move on with cytoscape.js |
@avalanche-tm - Is this still an issue? Can you try latest because I thought we fixed this. |
@amcdnl I didn't get any notification there was a bugfix. Anyway, there were other bugs (performance issues) with this library and I had to move fast so I decided to use other library. Sorry :/ |
@avalanche-tm yes it's still happening. |
ReferenceError: document is not defined |
Seeing similar issues here too on Next ReakeysBased on my investigation, one of the issues stems from It seems this is the culprit for the SSR issue on the reakeys side: https://github.com/search?q=repo%3Areaviz%2Freakeys%20navigator&type=code Strangely enough though, in the built package for reakeys, there is an ReagraphI believe that Reagraph itself has a similar issue but with Any use of this function outside of a React Lifecycle hook will cause an error also. Lazy ImportingA temporary solution should be dynamic imports in Next. Ref: https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading - Turning off SSR for these imported modules. This will allow for builds to complete and the runtime to work, but you will still receive error logs about these global client side variables. |
ran into this issue with next.js as well. i can get it working most of the way, but it fails when i try to set it to darkmode.
the code above works until i uncomment the darkmode. Edit: by the way, it works on dev but fails at build time with a |
To expand on @galigutta above. I am using NextJS 14.2.12 AppRouter and reagraph 14.19.2. I have dynamically loaded a wrapping component around the graph as...
I then use a similar approach as mentioned above using state to check for presence and document...
And I still get...
Locally this happens every other build. |
Describe the bug
When attempting to use reagraph with nextjs 14.1.0 I am getting error
window is not defined
I understand this normally suggests that a client element is trying to load on a server component.
For this reason, I thought I added enough checks, but to no avail. Is this package inherently incompatible with NextJS?
Steps to Reproduce the Bug or Issue
use client
NextJS client componentnpm run dev
ReferenceError: window is not defined - NextJS
Expected behavior
Expecting the Getting Started Graph
Platform
The text was updated successfully, but these errors were encountered: