Creating custom Kibana plugin in React

Elastic Stack Kibana
3

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
Screenshot 2018-11-10 at 3.55.32 PM.png2854×1458 426 KB

Is there something I might be missing? :slight_smile: