Dagre Not Registering as an Extension

[jakespeare]

I'm not sure if it's all extensions or just Dagre, but "cytoscape.use(dagre)" seems to not be working. This is combined with the react-cytoscape library. Below is a censored sample of the code

import cytoscape from 'cytoscape'
import dagre from 'cytoscape-dagre'
import CytoscapeComponent from 'react-cytoscapejs/src/component'
import React, { useState, useEffect } from 'react'

dagre(cytoscape) //I tried used both of these in different combinations, different locations
cytoscape.use(dagre)

const MyComponent = () => {
    let cyto
    useEffect(() => {
       //Problem line below - also a problem if it's in the component. 
       cyto.layout({
          name: 'dagre',
          animate: true,
          animationDuration: 1500,
        }) 
    }, [cyto])

    return () { 
        <CytoscapeComponent
                cy={(cy) => {
                  cyto = cy
                }}
                elements={CytoscapeComponent.normalizeElements(myElements)}
                panningEnabled
                style={{ width: '2000px', height: '1000px' }}
       />
    } 

}

What's especially weird is that I had this same bug in another app, and while trying to fix it, it seemingly magically disappeared. It comes back sometimes in the other app, and I don't know how it gets fixed. So for this new app, I made sure to follow the docs again to a T, but the evil bug reappeared. It works fine without using dagre as a layout. Let me know if I can provide some more information. My dependency versions:

"cytoscape": "3.17.0",
"cytoscape-dagre": "2.3.1",
"dagre": "^0.8.5",   
"graphlib": "2.1.8",
"react-cytoscapejs": "1.2.1"
"react": "16.13.1"

I made sure that cytoscape.use() is being called before this too. Thanks in advance

**No such layout `dagre` found.  Did you forget to import it and `cytoscape.use()` it?**
    at error (cytoscape.cjs.js:874)
    at Core.layout (cytoscape.cjs.js:14322)
    at ActionHierarchy.js:149
    at commitHookEffectListMount (react-dom.development.js:19610)
    at commitPassiveHookEffects (react-dom.development.js:19647)
    at HTMLUnknownElement.callCallback (react-dom.development.js:189)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:238)
    at invokeGuardedCallback (react-dom.development.js:291)
    at flushPassiveEffectsImpl (react-dom.development.js:22711)
    at unstable_runWithPriority (scheduler.development.js:659)
    at runWithPriority$1 (react-dom.development.js:11077)
    at flushPassiveEffects (react-dom.development.js:22679)
    at performSyncWorkOnRoot (react-dom.development.js:21594)
    at react-dom.development.js:11131
    at unstable_runWithPriority (scheduler.development.js:659)
    at runWithPriority$1 (react-dom.development.js:11077)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11126)
    at flushSyncCallbackQueue (react-dom.development.js:11114)
    at discreteUpdates$1 (react-dom.development.js:21752)
    at discreteUpdates (react-dom.development.js:811)
    at dispatchDiscreteEvent (react-dom.development.js:4211)`

[jakespeare]

Oops!

I think somehow there were two separate Cytoscape libraries in my app. I'm not sure how that happened 🤔 , as I thought I was being diligent with my libraries. I discovered this when I was debugging one side of cytoscape with console statements and there were no console statements where the error occurred, but there were console statements where the extension registration occurred. Even after investigating dependencies for a while, I didn't see anything wrong with my package.json. I reinstalled these a few times. Ultimately it was just a sneaky sneaky bug locally, so not a problem with cytoscape/dagre.

If anyone else gets this, with all of the above yarn added, try another yarn remove cytoscape yarn add cytoscape.

[nmauersberg]

Thanks a lot! That was my problem too. I was tracking it down for hours already. <3