Getting the error when using EuiDataGrid inside Kibana plugin

[zixon89 (Nikola Zivkovic)]

Hi there,

I hope it's the right place to ask the following question...

I'm new with Kibana plugin development, and I figure out most of the back-end part.
However, now comes the tricky part for me - the EUI framework.

I want to display some data I got from Elasticache inside EUI Datagrid.
I was able to successfully prepare my UI dev work on code sandbox here using some dummy data.

But, when I tried to use that same code inside my plugin, I'm getting the following error:

react-dom.development.js:55 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `GridViewDataTable

I was able to handle files and methods references connection, optimization runs successfully, kibana in dev mode started successfully.

Here is my plugin folder structure located inside kibana's plugins directory:

The issue is occurring inside gridviewdata.js file where I'm trying to create a EuiDataGrid with dummy set of data.
What is strange, is if I put anything else to return here at line 255 of my gridviewdata.js file instead of EuiDataGrid, it renders perfectly, but it wont with EuiDataGrid and I cannot figure it out why. I tried various changes, none of them worked - I tried even to render that same dummy grid table directly inside render() method of my Main class, didn't work either.

You can find whole plugin structure on my github repo.

Am I missing something?

Thanks,
Nikola

[corey.robertson]

Hi @zixon89

What version of Kibana are you building your plugin against?

Do other components from Eui work as expected? EuiDatagrid was released ~a year ago, so if you have an older version of Kibana, the provided Eui package might not yet have the datagrid.

[zixon89 (Nikola Zivkovic)]

Hi @corey.robertson,

I should've check the version compatibility... You are right.

I'm using Kibana v7.4.0. and I can see the EuiDatagrid was released with elastic/ui version 14.8.0 from changelog page.
The elastic/ui dependency for Kibana 7.4.0. is set in package.json file to be 13.6.1.

So, that's was the problem here.
I apologize, my bad for rushing here with question before checking versioning capability, it was not professional at all from my side as developer.

Since I'm limited with this Kibana version, I will use pure React to develop my own data grid.

Thanks again,
Nikola

[wylie (Wylie Conlon)]

@zixon89 There is also EuiBasicTable, which was available in the prior version of EUI. It's definitely not as powerful, but for most uses it's similar.