Kibana自定义插件引入Elastic [email protected]组件库

Kibana自定义插件引入eui23.3.0

npm install @elastic/eui@23.3.0
npm install typescript@^3.7.2
npm install @elastic/datemath@^5.0.2
npm install @types/react-dom@^16.9.5
npm install react-dom@^16.12
npm install react@^16.12
npm install moment@^2.13.0

Eui文档组件

1、创建Grid.js，单独js文件写入示例代码，导出组件：
	export default () => {}
2、在main.js中引入：
	import GridDemo from './Grid'
3、main.js的render()中使用：
 	<GridDemo />

测试环境运行报错

FATAL  Error: Optimizations failure.
6571 modules
ERROR in ./plugins/grid_demo/node_modules/@elastic/eui/lib/components/icon/icon.test.js
Module not found: Error: Can't resolve 'cheerio' in '/home/testuser1/opendistroforelasticsearch-kibana/plugins/grid_demo/node_modules/@elastic/eui/lib/components/icon'
ERROR in ./plugins/grid_demo/node_modules/@elastic/eui/lib/components/icon/icon.test.js
Module not found: Error: Can't resolve 'enzyme' in '/home/testuser1/opendistroforelasticsearch-kibana/plugins/grid_demo/node_modules/@elastic/eui/lib/components/icon'

解决：
npm install cheerio@latest
npm install enzyme@latest

CSS样式无法加载

组件文件顶部引入对应的css：
import '@elastic/eui/dist/eui_theme_light.min.css'

** 帮助文档页面的Theme设置成Light，避免视觉错误 **