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.
But i'am facing an error when trying to launch kibana visualization :
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.