# Circular reference problem while creating React plugin for Kibana

**URL:** <https://discuss.elastic.co/t/circular-reference-problem-while-creating-react-plugin-for-kibana/156229>\
**Category:** Kibana\
**Created:** [November 12, 2018, 5:21am UTC](https://discuss.elastic.co/t/circular-reference-problem-while-creating-react-plugin-for-kibana/156229 "2018-11-12T05:21:50Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![MishMick](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@MishMick](https://discuss.elastic.co/u/MishMick)\
**Post date:** [November 12, 2018, 5:21am UTC](https://discuss.elastic.co/t/circular-reference-problem-while-creating-react-plugin-for-kibana/156229/1 "2018-11-12T05:21:50Z")

</div>

Circular reference to "VisProvider" found while resolving private deps: registry -\> function(savedVisualizations){return savedVisualizations} -\> VisProvider -\> registry -\> MynewVisType

Is there something I might be missing?

---

<div class="post-metadata">

**Author:** ![rashmi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rashmi/32/16391_2.png) [@rashmi](https://discuss.elastic.co/u/rashmi)\
**Post date:** [November 12, 2018, 10:42pm UTC](https://discuss.elastic.co/t/circular-reference-problem-while-creating-react-plugin-for-kibana/156229/2 "2018-11-12T22:42:47Z")

</div>

@tylersmalley / @jbudz - any help here ? Thanks

Rashmi

---

<div class="post-metadata">

**Author:** ![rashmi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rashmi/32/16391_2.png) [@rashmi](https://discuss.elastic.co/u/rashmi)\
**Post date:** [November 12, 2018, 11:08pm UTC](https://discuss.elastic.co/t/circular-reference-problem-while-creating-react-plugin-for-kibana/156229/3 "2018-11-12T23:08:40Z")

</div>

@timroes - I think this q belongs more to Viz team .

Thanks  
Rashmi

---

<div class="post-metadata">

**Author:** ![timroes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/timroes/32/19712_2.png) [@timroes](https://discuss.elastic.co/u/timroes)\
**Post date:** [November 14, 2018, 7:51am UTC](https://discuss.elastic.co/t/circular-reference-problem-while-creating-react-plugin-for-kibana/156229/4 "2018-11-14T07:51:58Z")

</div>

Hi Mishal,

could you please share the code of the file that contains your new vis type?

Cheers,  
Tim

---

<div class="post-metadata">

**Author:** ![MishMick](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@MishMick](https://discuss.elastic.co/u/MishMick)\
**Post date:** [November 15, 2018, 5:07am UTC](https://discuss.elastic.co/t/circular-reference-problem-while-creating-react-plugin-for-kibana/156229/5 "2018-11-15T05:07:57Z")

</div>

Here's my code

```
import { CATEGORY } from 'ui/vis/vis_category';
import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';

    const MyNewVisType = (Private) => {
      const VisFactory = Private(VisFactoryProvider);
      return VisFactory.createReactVisualization({
          name: 'ml_d3',
          title:'d3',
          icon:'fa fa-eye',
          description: 'D3',
         category: CATEGORY.OTHER,
         visConfig: {
             template: ReactComponent
          }
      });
    }
      VisTypeRegistryProvider.register(MyNewVisType);
      export default MyNewVisType;

```

And here's my react component

```
import React,{Component} from "react"
export default class ReactComponent extends Component{
 render(){
    return (
      <div><h1>React component</h1></div>
    );
}
}
```

---

<div class="post-metadata">

**Author:** ![timroes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/timroes/32/19712_2.png) [@timroes](https://discuss.elastic.co/u/timroes)\
**Post date:** [November 15, 2018, 8:06am UTC](https://discuss.elastic.co/t/circular-reference-problem-while-creating-react-plugin-for-kibana/156229/6 "2018-11-15T08:06:02Z")

</div>

You really need to post the FULL file for that. Cyclic imports will occur cause of some imports, so stripping the imports from the code, doesn't help much to find out the problem 🙂

---

<div class="post-metadata">

**Author:** ![MishMick](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@MishMick](https://discuss.elastic.co/u/MishMick)\
**Post date:** [November 15, 2018, 8:41am UTC](https://discuss.elastic.co/t/circular-reference-problem-while-creating-react-plugin-for-kibana/156229/7 "2018-11-15T08:41:40Z")

</div>

Hi @timroes,

I have edited my post accordingly. Please take a look again. 🙂

---

<div class="post-metadata">

**Author:** ![timroes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/timroes/32/19712_2.png) [@timroes](https://discuss.elastic.co/u/timroes)\
**Post date:** [November 16, 2018, 9:02am UTC](https://discuss.elastic.co/t/circular-reference-problem-while-creating-react-plugin-for-kibana/156229/8 "2018-11-16T09:02:06Z")

</div>

Hmm nothing in there looks suspicious. You could try not to `export` the actual vis definition, since that's usually not needed unless you manually import it somewhere (if so it would be interesting to hear where you imported it). Also did you run any modifications or hacks on the vis type registry itself?

---

<div class="post-metadata">

**Author:** ![MishMick](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@MishMick](https://discuss.elastic.co/u/MishMick)\
**Post date:** [November 16, 2018, 10:31am UTC](https://discuss.elastic.co/t/circular-reference-problem-while-creating-react-plugin-for-kibana/156229/9 "2018-11-16T10:31:02Z")

</div>

No modifications to the type registry.

---

<div class="post-metadata">

**Author:** ![timroes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/timroes/32/19712_2.png) [@timroes](https://discuss.elastic.co/u/timroes)\
**Post date:** [November 16, 2018, 1:18pm UTC](https://discuss.elastic.co/t/circular-reference-problem-while-creating-react-plugin-for-kibana/156229/10 "2018-11-16T13:18:40Z")

</div>

I think in that case we would need the source code of the full plugin to find out what's possibly broken there. Is this somewhere available on GitHub you can link to?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [December 14, 2018, 1:18pm UTC](https://discuss.elastic.co/t/circular-reference-problem-while-creating-react-plugin-for-kibana/156229/11 "2018-12-14T13:18:51Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.
