antvis / Graphin

A React toolkit for graph visualization based on G6
https://graphin.antv.antgroup.com
MIT License
980 stars 262 forks source link

modeController is undefined #476

Closed Shambuwu closed 11 months ago

Shambuwu commented 1 year ago

Describe the bug

I have the following component:


import React from 'react';
import Graphin, {Utils} from '@antv/graphin';

const data = Utils.mock(10).random().graphin();

export default function Graph() {
    return (
        <div>
            <Graphin data={data} />
        </div>
    );
}

Very simple, pretty much straight from the README. Using this component in my application however results in the following error:

modeController is undefined ./node_modules/@antv/g6-core/es/graph/graph.js/AbstractGraph.prototype.removeBehaviors@http://localhost:3000/static/js/bundle.js:34081:5 ./node_modules/@antv/graphin/es/behaviors/useBehaviorHook.js/useBehaviorHook/<@http://localhost:3000/static/js/bundle.js:63338:11 commitHookEffectListMount@http://localhost:3000/static/js/bundle.js:189440:30 commitPassiveMountOnFiber@http://localhost:3000/static/js/bundle.js:190933:42 commitPassiveMountEffects_complete@http://localhost:3000/static/js/bundle.js:190905:38 commitPassiveMountEffects_begin@http://localhost:3000/static/js/bundle.js:190895:45 commitPassiveMountEffects@http://localhost:3000/static/js/bundle.js:190885:38 flushPassiveEffectsImpl@http://localhost:3000/static/js/bundle.js:192770:32 flushPassiveEffects@http://localhost:3000/static/js/bundle.js:192722:18 commitRootImpl@http://localhost:3000/static/js/bundle.js:192681:9 commitRoot@http://localhost:3000/static/js/bundle.js:192464:23 performSyncWorkOnRoot@http://localhost:3000/static/js/bundle.js:191973:17 flushSyncCallbacks@http://localhost:3000/static/js/bundle.js:179976:26 commitRootImpl@http://localhost:3000/static/js/bundle.js:192701:7 commitRoot@http://localhost:3000/static/js/bundle.js:192464:23 finishConcurrentRender@http://localhost:3000/static/js/bundle.js:191861:23 performConcurrentWorkOnRoot@http://localhost:3000/static/js/bundle.js:191712:33 workLoop@http://localhost:3000/static/js/bundle.js:224627:46 flushWork@http://localhost:3000/static/js/bundle.js:224605:18 performWorkUntilDeadline@http://localhost:3000/static/js/bundle.js:224842:25

Something about modeController being undefined.

Your Example Website or App

React App

Steps to Reproduce the Bug or Issue

  1. Make the following React component:

import React from 'react'; import Graphin, {Utils} from '@antv/graphin';

const data = Utils.mock(10) .random() .graphin();

export default function Graph() { return (

);

}



2. Place the component in App.tsx

3. Error.

### Expected behavior

I expected seeing a graph with dummy data, however I get an error stating modeController is undefined 

### Screenshots or Videos

_No response_

### Platform

- OS: Arch Linux
- Browser: Firefox
- Version 111.0.1 (64-bit)

### Additional context

_No response_
ruslan-gennadievich commented 1 year ago

same error

pomelo-nwu commented 1 year ago

@ruslan-gennadievich @Shambuwu What is the version of g6,Can you give me a codesandbox

zhgw01 commented 1 year ago

same error, g6 version is 4.8.9

bobony commented 1 year ago

@zhgw01 @ruslan-gennadievich if you encountering this issue try running your app without React.strictmode it worked for me after removing React.strictmode

pomelo-nwu commented 11 months ago

@bobony Thanks for your suggestion, I will try to run Graphin under React.strictmode, hoping to find a solution