Does not work on Next.js SSR/CSR

[kumarabhirup]

I am trying to use this on Next.js v12 I get the self is not defined error.

To fix that, I tried Next.js Dynamic, but the error persists in other ways.

const contextMenus = dynamic(() => import("cytoscape-context-menus"), {
  ssr: false,
});

Cytoscape.use(contextMenus); //-> throws error etc.apply is undefined

I also tried this,

dynamic(() => {
   return import("cytoscape-context-menus").then((x) => {
     Cytoscape.use(x); // simply doesn't work (cy.contextMenus doesn't exist)
     return x;
   })
});

Am I missing something? Thank you!

[hasanbalci]

@kumarabhirup I'm not experienced with Next.js, but you are probably trying to use extension in server side with Node.js, right? Can you confirm this? If this is the case, I think I know the reason for self is not defined error and I can fix it.

[kumarabhirup]

If it works with Server Side, it’d be great, if it works on Client Side on Next.js without errors that’d be great too haha

…

On Thu, Aug 18, 2022 at 4:34 PM Hasan Balcı ***@***.***> wrote: @kumarabhirup <https://github.com/kumarabhirup> I'm not experienced with Next.js, but you are probably trying to use extension in server side with Node.js, right? Can you confirm this? If this is the case, I think I know the problem and I can fix it. — Reply to this email directly, view it on GitHub <#72 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGCAOHWKQBMJ2KFX66PSJF3VZXRQNANCNFSM562P4QUQ> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>

[hasanbalci]

@kumarabhirup I made a commit in unstable branch. Generally, self is not defined error comes in Node.js, so I changed it to be this instead of self and this change generally solves the problem. Can you try unstable branch and check whether your problem is solved or not?

[kumarabhirup]

@hasanbalci I am checking this out, and will let you know asap!

[dkgitcode]

@hasanbalci @kumarabhirup and I just tried using the unstable branch and we are still getting the same etc.apply bug. After not dynamically importing we also get a ReferenceError: HTMLButtonElement is not defined. Any thoughts on how to fix? Perhaps we are not installing the unstable branch correctly? We npm installed the unstable git branch and ran npm run build inside the node module.

[ajmeese7]

Could we get this revisited? I'm having the same error with Svelte currently, I would definitely like to see this resolved so I can integrate this awesome module.

I also have SSR enabled, the Cytoscape instance isn't created until after the component is mounted, but the import statements are above that code, so my issue is likely the same as the one described above with Next.js.

[unidesigner]

Any update on this? Has anybody figured out a workaround?

[jado66]

I would like this as well

[jardelva96]

import dynamic from 'next/dynamic';

const CytoscapeComponent = dynamic(() => import("cytoscape"), {
ssr: false
});

const contextMenus = dynamic(() => import("cytoscape-context-menus"), {
ssr: false
});

useEffect(() => {
const cytoscape = require("cytoscape");
const contextMenus = require("cytoscape-context-menus");

cytoscape.use(contextMenus);

const cy = cytoscape({
container: document.getElementById('cy'),
elements: [],
});

// Other cytoscape logic

}, []);