# Creating custom Kibana plugin in React

**URL:** <https://discuss.elastic.co/t/creating-custom-kibana-plugin-in-react/156012>\
**Category:** Kibana\
**Created:** [November 9, 2018, 9:07am UTC](https://discuss.elastic.co/t/creating-custom-kibana-plugin-in-react/156012 "2018-11-09T09:07:23Z")\
**Posts on this page:** 1\
**Showing post:** 3

<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 10, 2018, 10:27am UTC](https://discuss.elastic.co/t/creating-custom-kibana-plugin-in-react/156012/3 "2018-11-10T10:27:31Z")

</div>

Hi, I implemented the react component as you mentioned. However I ran into another problem. Here are my files

app.js

```
import { CATEGORY } from 'ui/vis/vis_category';
import { VisFactoryProvider } from 'ui/vis/vis_factory';
import {Schemas} from 'ui/vis/editors/default/schemas';
import {VisTypesRegistryProvider} from 'ui/registry/vis_types';
import {ReactComponent} from './vis/ReactComponent';

const MynewVisType = (Private) => {
    const visFactory = Private(VisFactoryProvider);
    return visFactory.createReactVisualization({
        name: 'ml_d3',
        title: 'D3',
        icon: 'fa fa-eye',
        description: 'Cool new d3 chart',

        category: CATEGORY.OTHER,
        visConfig: {
            component: ReactComponent
        }
    });
}

VisTypesRegistryProvider.register(MynewVisType);
export default MynewVisType;

```

index.js:

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

```

ReactComponent.js

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

```

package.json

```
{
    "name": "d3kib",
    "main": "index.js",
    "version": "1.0.0",
    "description": "Plugin to integrate d3 scripts",
    "kibana": {
        "version": "6.3.2"
    },
    "dependencies": {
        "ansi-to-html": "0.6.4",
        "handlebars": "4.0.6",
        "lodash.escape": "4.0.1",
        "lodash.get": "4.4.2",
        "lodash.set": "4.3.2",
        "react": "16.0.0"
    }
}

```

I am getting the error:

 ![32%20PM](https://us1.discourse-cdn.com/elastic/original/3X/2/d/2d89472e3a3773accd28d5cc22e51092eed6164b.png)

Is there something I might be missing? 🙂

---

_[View the full topic](https://discuss.elastic.co/t/creating-custom-kibana-plugin-in-react/156012)._