Can't make Cytoscape.use() work with Gatsby about react-cytoscapejs HOT 9 OPEN

It looks like Gatsby doesn't handle import correctly.

from react-cytoscapejs.

The following example works as expected (with js cytoscape and Gatsby).

// /pages/Cyto.js
import React, { useRef, useEffect } from "react"
import Cytoscape from "cytoscape"
import cxtmenu from "cytoscape-cxtmenu"
Cytoscape.use(cxtmenu)

const Cyto = () => {
  const cyRef = useRef(null)

  useEffect(() => {
    const container = document.getElementById("cyto")
    cyRef.current = Cytoscape({ container })
    cyRef.current.cxtmenu({
      selector: "core",
      commands: [
        {
          content: "Add",
          select: () => {
            console.log("Add")
          },
          fillColor: "rgba(0,150,0,0.75)",
        },
      ],
    })
  })

  return (
    <div
      id="cyto"
      style={{
        height: "100vh",
        width: "100vh",
        backgroundColor: "rgb(30,30,30)",
      }}
    />
  )
}
export default Cyto

I've created a pull request that registers extensions passed as props in the constructor, which seems to solve the issue. I have yet to write tests for it, but opened it, in case you want to have a look.

from react-cytoscapejs.

You can't register extensions in the constructor. An extension may be registered only once for the lifecycle of the app. The constructor can be called many times.

from react-cytoscapejs.

True. Is there another place within the library that would be a proper placement, or should the handling of extensions remain outside this library?

from react-cytoscapejs.

The only place it would make sense within the library is in a static function. See cytosnap for an example: https://github.com/cytoscape/cytosnap#cytosnapuse

Cytosnap uses Cytosnap.use() for this with string literals like use([ 'cytoscape-cxtmenu' ]) rather than use([ require('cytoscape-cxtmenu') ]). This is necessary in cytosnap, because the cytoscape instance runs within a separate process -- the puppeteer process rather than the node one. I don't know what is causing gatsby to not import correctly, but using the same approach as cytosnap should resolve it.

A caveat is that you would have to call CytoscapeComponent.use() before any instance of CytoscapeComponent is instantiated. So it would be very similar to using Cytoscape.use(), except the passed values are extension package ID strings instead of extension classes.

from react-cytoscapejs.

Thanks Max!

I have dropped Gatsby, so the issue is not pressing to me at the moment.

I had some problems getting my fork to work correctly as a dependency, but I will look into this again later.

from react-cytoscapejs.

Depending on your bundling configuration, the issue (as alluded to in #17) might be that you have multiple Cytoscapes in your bundle.

from react-cytoscapejs.

perhaps this should be a new issue, but I'm having a more general problem getting cystoscape to work with gatsby. it works fine in development, but as soon as i try to build and deploy to netlify, it throws a WebpackError: ReferenceError: window is not defined error. Does anyone have experience troubleshooting this? thank you.

from react-cytoscapejs.

@jdnudel a work around for modules that don't support SSR in Gatsby is documented here:

https://www.gatsbyjs.org/docs/debugging-html-builds/#fixing-third-party-modules

in gatsby-node.js:

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-cytoscapejs/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

from react-cytoscapejs.