# React visualization plugin Error: "Circular reference to "registry"

**URL:** <https://discuss.elastic.co/t/react-visualization-plugin-error-circular-reference-to-registry/211394>\
**Category:** Kibana\
**Created:** [December 10, 2019, 11:56pm UTC](https://discuss.elastic.co/t/react-visualization-plugin-error-circular-reference-to-registry/211394 "2019-12-10T23:56:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![elmaghraoui](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/elmaghraoui/32/59150_2.png) [@elmaghraoui](https://discuss.elastic.co/u/elmaghraoui)\
**Post date:** [December 10, 2019, 11:56pm UTC](https://discuss.elastic.co/t/react-visualization-plugin-error-circular-reference-to-registry/211394/1 "2019-12-10T23:56:21Z")

</div>

I'm trying to develop my first Kibana plugin using ReactJS.I have followed the official doc [https://www.elastic.co/guide/en/kibana/current/development-visualization-factory.html](https://www.elastic.co/guide/en/kibana/current/development-visualization-factory.html).  
But i'am facing an error when trying to launch kibana visualization :

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/b/e/be957069338af18f3f80afaeeabc8f27501bf069.png)

Error: "Circular reference to "registry" found while resolving private deps: registry -\> MynewVisType"  
instantiate \OCP\ELK\kibana\src\legacy\ui\public\private\private.js:150  
get \OCP\ELK\kibana\src\legacy\ui\public\private\private.js:171  
Private \OCP\ELK\kibana\src\legacy\ui\public\private\private.js:190  
VisualizeListingController \OCP\ELK\kibana\src\legacy\core\_plugins\kibana\public\visualize\listing\visualize\_listing.js:72

Kibana version 7.4.3 / React 16

Code source :

> /node\_modules  
> /public  
> -- app.js  
> -- ReactComponent.js  
> index.js  
> package.json

--index.js

> export default function (kibana) {  
> return new kibana.Plugin({  
> uiExports: {  
> visTypes: [  
> 'plugins/d3kib/app2'  
> ]  
> }  
> });  
> }

--app.js

> import { VisFactoryProvider } from 'ui/vis/vis\_factory';  
> import {VisTypesRegistryProvider} from 'ui/registry/vis\_types';  
> import {ReactComponent} from './ReactComponent';  
> function MynewVisType(Private){  
> const visFactory = Private(VisFactoryProvider);  
> return visFactory.createReactVisualization({  
> name: 'my\_new\_vis',  
> title: 'My New Vis',  
> icon: 'my\_icon',  
> description: 'Cool new chart',  
> visConfig: {  
> component: ReactComponent  
> }  
> });  
> }  
> VisTypesRegistryProvider.register(MynewVisType);  
> //export default MynewVisType;  
> export default MynewVisType;

--ReactComponent.js

> import React, {Component} from "react";  
> export default class ReactComponent extends Component{  
> render(){  
> return (
> 
> Simple react plugin
>   
> );  
> }  
> }

Any suggestions please.

---

<div class="post-metadata">

**Author:** ![azasypkin](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/azasypkin/32/42216_2.png) [@azasypkin](https://discuss.elastic.co/u/azasypkin)\
**Post date:** [December 11, 2019, 11:30am UTC](https://discuss.elastic.co/t/react-visualization-plugin-error-circular-reference-to-registry/211394/2 "2019-12-11T11:30:33Z")

</div>

Hi @elmaghraoui,

I believe the fastest way to get help with the plugin development is to join [http://ela.st/slack](http://ela.st/slack) and ask about/debug the problem there.

Best,  
Oleg

---

<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:** [January 8, 2020, 11:43am UTC](https://discuss.elastic.co/t/react-visualization-plugin-error-circular-reference-to-registry/211394/3 "2020-01-08T11:43:25Z")

</div>

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