How to make EUI part of Kibana packages?

danburi · May 20, 2021, 5:13pm

Hello,
I'm running a development version of Kibana 7.10.2. Currently, I have a fork of EUI 29.3.2, with many custom components (eui/packages/) and themes (eui/src/themes).

Ideally, I want to submodule this fork in kibana/packages/elastic-eui with the awareness of @kbn/pm to do the job. I follow the instruction to make this kibana/packages/elastic-eui/package.json to have private: true.

However yarn kbn bootstrap throw lots of error regarding dependency version conflicts between kibana and eui:

ERROR [@elastic/eui] depends on [@elastic/datemath] but it's not using the local package. Update its package.json to the expected value below.
 info Additional debugging info:

 │ info actual: "@elastic/datemath": "^5.0.3"
 │      expected: "@elastic/datemath": "5.0.3"
 │      package: @elastic/eui (~/projects/kibana/packages/elastic-eui/package.json)
 │ info actual: "@elastic/eslint-config-kibana": "^0.15.0"                                  │=
 │      expected: "@elastic/eslint-config-kibana": "0.15.0" 
 │      package: @elastic/eui (~/projects/kibana/packages/elastic-eui/package.json)

After fixing those it continues:

ERROR [single_version_dependencies] Multiple version ranges for the same dependency
      were found declared across different package.json files. Please consolidate
      those to match across all package.json files. Different versions for the
      same dependency is not supported.

      If you have questions about this please reach out to the operations team.

      The conflicting dependencies are:

        @babel/core
          ^7.11.6 => kibana, @kbn/dev-utils, @kbn/i18n, @kbn/interpreter, @kbn/optimizer, @kbn/pm, @kbn/ui-framework, x-pack
          ^7.11.4 => @elastic/eui
        @elastic/charts
          23.2.2 => kibana, @kbn/ui-shared-deps
          ^20.0.0 => @elastic/eui
        @types/classnames
          ^2.2.9 => kibana
          ^2.2.10 => @elastic/eui
        @types/jest
          ^26.0.14 => kibana, x-pack
          ^24.0.6 => @elastic/eui
        @types/lodash
          ^4.14.160 => kibana, @elastic/eui
          ^4.14.159 => @kbn/pm, @kbn/telemetry-tools, @kbn/test
        @types/node
          >=10.17.17 <10.20.0 => kibana, @kbn/pm, x-pack
          ^10.17.5 => @elastic/eui
        @types/react
          ^16.9.36 => kibana, x-pack
          ^16.9.34 => @elastic/eui
        @types/react-dom
          ^16.9.8 => kibana, x-pack
          ^16.9.6 => @elastic/eui
        @types/uuid
          ^3.4.4 => kibana, x-pack
          ^8.3.0 => @elastic/eui
        @typescript-eslint/eslint-plugin
          ^3.10.0 => kibana
          ^3.10.1 => @elastic/eui
        @typescript-eslint/parser
          ^3.10.0 => kibana
          ^3.10.1 => @elastic/eui
        axe-core
          ^4.0.2 => kibana
          ^4.0.1 => @elastic/eui
        babel-eslint
          ^10.0.3 => kibana
          ^10.1.0 => @elastic/eui
        babel-jest
          ^26.3.0 => kibana, x-pack
          ^24.1.0 => @elastic/eui
        chai
          3.5.0 => kibana
          ^4.2.0 => @elastic/eui
        chromedriver
          ^87.0.0 => kibana
          ^77.0.0 => @elastic/eui
        classnames
          2.2.6 => kibana, @kbn/ui-framework, x-pack
          ^2.2.6 => @elastic/eui
        enzyme-adapter-react-16
          ^1.15.2 => kibana, x-pack
          ^1.15.3 => @elastic/eui
        enzyme-to-json
          ^3.4.4 => kibana, x-pack
          ^3.5.0 => @elastic/eui
        eslint-plugin-babel
          ^5.3.0 => kibana
          ^5.3.1 => @elastic/eui
        eslint-plugin-import
          ^2.19.1 => kibana
          ^2.22.0 => @elastic/eui
        eslint-plugin-jest
          ^24.0.2 => kibana
          ^23.20.0 => @elastic/eui
        eslint-plugin-jsx-a11y
          ^6.2.3 => kibana
          ^6.3.1 => @elastic/eui
        eslint-plugin-mocha
          ^6.2.2 => kibana
          ^6.3.0 => @elastic/eui
        eslint-plugin-react
          ^7.20.3 => kibana
          ^7.20.6 => @elastic/eui
        eslint-plugin-react-hooks
          ^4.0.4 => kibana
          ^3.0.0 => @elastic/eui
        faker
          1.1.0 => kibana
          ^4.1.0 => @elastic/eui
        geckodriver
          ^1.21.0 => kibana
          ^1.20.0 => @elastic/eui
        jest
          ^26.4.2 => kibana, spec-to-console, x-pack
          ^24.1.0 => @elastic/eui
        jest-cli
          ^26.4.2 => kibana, x-pack
          ^24.1.0 => @elastic/eui
        mocha
          ^7.1.1 => kibana, x-pack
          ^5.0.4 => @elastic/eui
        prettier
          ^2.1.1 => kibana, @kbn/plugin-generator, @kbn/pm, spec-to-console
          ^1.19.1 => @elastic/eui
        prop-types
          ^15.7.2 => kibana, @kbn/i18n, @kbn/ui-framework, x-pack
          ^15.6.0 => @elastic/eui
        react-redux
          ^7.2.0 => kibana, @kbn/ui-framework, x-pack
          ^7.2.1 => @elastic/eui
        sass-lint
          ^1.12.1 => kibana
          ^1.13.1 => @elastic/eui
        typescript
          4.0.2 => kibana, @kbn/ace, @kbn/analytics, @kbn/apm-config-loader, @kbn/config-schema, @kbn/config, @kbn/dev-utils, @kbn/i18n, @kbn/logging, @kbn/monaco, @kbn/plugin-helpers, @kbn/pm, @kbn/release-notes, @kbn/std, @kbn/telemetry-tools, @kbn/utils, app_link_test, core_app_status, core_plugin_a, core_plugin_appleave, core_plugin_b, core_plugin_chromeless, core_plugin_route_timeouts, corePluginStaticAssets, core_provider_plugin, data_search_plugin, docViewPlugin, elasticsearch_client_plugin, index_patterns_test_plugin, kbn_sample_panel_action, kbn_top_nav, kbn_tp_custom_visualizations, management_test_plugin, rendering_plugin, ui_settings_plugin, kbn_tp_run_pipeline, x-pack, alerts
          3.7.2 => @elastic/eui
        core-js
          ^3.6.5 => kibana, @kbn/optimizer, @kbn/ui-framework, @kbn/ui-shared-deps
          ^2.5.1 => @elastic/eui
        glob
          ^7.1.2 => kibana, @kbn/es, @kbn/pm, spec-to-console, @kbn/test, x-pack
          ^7.1.6 => @elastic/eui
        moment
          ^2.24.0 => kibana, @kbn/config, @kbn/dev-utils, @kbn/telemetry-tools, @kbn/ui-framework, @kbn/ui-shared-deps, x-pack
          ^2.27.0 => @elastic/eui
        moment-timezone
          ^0.5.27 => kibana, @kbn/ui-shared-deps, x-pack
          ^0.5.31 => @elastic/eui
        pegjs
          0.10.0 => kibana, @kbn/interpreter
          ^0.10.0 => @elastic/eui
        uuid
          3.3.2 => kibana, @kbn/interpreter, @kbn/ui-framework, x-pack
          ^8.3.0 => @elastic/eui
        autoprefixer
          ^9.8.6 => @elastic/eui
          ^9.7.4 => @kbn/optimizer, x-pack
        babel-loader
          ^8.1.0 => @elastic/eui
          ^8.0.6 => @kbn/interpreter, @kbn/monaco, @kbn/optimizer, @kbn/pm, @kbn/storybook, @kbn/ui-framework, x-pack
        css-loader
          ^4.2.2 => @elastic/eui
          ^3.4.2 => @kbn/interpreter, @kbn/monaco, @kbn/optimizer, @kbn/ui-framework, @kbn/ui-shared-deps
        eslint-import-resolver-webpack
          ^0.12.2 => @elastic/eui
          0.11.1 => @kbn/eslint-import-resolver-kibana
        file-loader
          ^6.1.0 => @elastic/eui
          ^4.2.0 => @kbn/optimizer, @kbn/ui-framework
        get-port
          ^5.1.1 => @elastic/eui
          ^5.0.0 => x-pack
        html
          ^1.0.0 => @elastic/eui
          1.0.0 => @kbn/ui-framework
        node-sass
          ^4.14.1 => @elastic/eui
          ^4.13.1 => @kbn/optimizer, @kbn/ui-framework
        postcss-loader
          ^4.0.1 => @elastic/eui
          ^3.0.0 => @kbn/optimizer, @kbn/ui-framework, x-pack
        raw-loader
          ^4.0.1 => @elastic/eui
          ^3.1.0 => @kbn/ace, @kbn/monaco, @kbn/optimizer, @kbn/ui-framework, x-pack
        react-test-renderer
          ^16.13.1 => @elastic/eui
          ^16.12.0 => x-pack
        resolve
          ^1.17.0 => @elastic/eui
          ^1.7.1 => @kbn/eslint-import-resolver-kibana
        sass-loader
          ^10.0.1 => @elastic/eui
          ^8.0.2 => @kbn/interpreter, @kbn/optimizer, @kbn/ui-framework, x-pack
        style-loader
          ^1.2.1 => @elastic/eui
          ^1.1.3 => @kbn/interpreter, @kbn/optimizer, @kbn/ui-framework
        terser-webpack-plugin
          ^4.1.0 => @elastic/eui
          ^2.1.2 => @kbn/optimizer
        url-loader
          ^4.1.0 => @elastic/eui
          ^2.2.0 => @kbn/interpreter, @kbn/optimizer
        webpack
          ^4.44.1 => @elastic/eui
          ^4.41.5 => @kbn/eslint-import-resolver-kibana, @kbn/interpreter, @kbn/monaco, @kbn/optimizer, @kbn/pm, @kbn/storybook, @kbn/ui-framework, @kbn/ui-shared-deps, x-pack
        webpack-cli
          ^3.3.12 => @elastic/eui
          ^3.3.10 => @kbn/interpreter, @kbn/monaco, @kbn/pm
        webpack-dev-server
          ^3.11.0 => @elastic/eui
          ^3.8.2 => @kbn/ui-framework
        yeoman-generator
          ^4.12.0 => @elastic/eui
          1.1.1 => @kbn/ui-framework
        yo
          ^3.1.1 => @elastic/eui
          2.0.6 => @kbn/ui-framework
        @types/chroma-js
          ^2.0.0 => @elastic/eui
          ^1.4.2 => x-pack
        chroma-js
          ^2.1.0 => @elastic/eui
          ^1.4.1 => x-pack
        react-ace
          ^7.0.5 => @elastic/eui
          ^5.9.0 => @kbn/ui-framework
        react-dropzone
          ^10.2.1 => @elastic/eui
          ^4.2.9 => x-pack
        react-is
          ~16.3.0 => @elastic/eui
          ^16.8.0 => @kbn/babel-preset, @kbn/ui-shared-deps, x-pack
        tabbable
          ^3.0.0 => @elastic/eui
          1.1.3 => @kbn/ui-framework
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Hope you can provide some advice to overcome this.

rashmi · May 20, 2021, 7:37pm

@thompsongl - can you please assist?

Thanks
Rashmi

danburi · May 21, 2021, 8:52pm

@thompsongl Any lights you can shed?
Also any alternatives to get the same result would be much appreciated.

thompsongl · May 24, 2021, 2:39pm

What instructions did you follow?
I may need to ask someone with a better understanding of the Kibana package system, but we can start there.

danburi · May 25, 2021, 4:53pm

I followed the readme in packages/ https://github.com/elastic/kibana/blob/v7.10.2/packages/README.md

I may need to ask someone with a better understanding of the Kibana package system

Yes, please. I understand the error because yarn installs all deps in root dir, and think there would be more steps to resolve them which I lack of knowledge of, as how it should work when installing deps from npm.

tylersmalley · May 25, 2021, 7:18pm

The problem you're running into is that EUI is using a published version of @elastic/datemath, where Kibana itself is using packages/elastic-datematch. You might be able to update the EUI dependency to use the same as Kibana - or just remove the dependency from the package.json and let it bubble up.

tylersmalley · May 25, 2021, 7:19pm

Looking at your other message, looks like there are going to be quite a few dependencies to deal with. You're probably best off publishing your own fork of EUI and updating the reference in your Kibana fork unless you want to and are able to do the work of resolving the conflicts.

danburi · May 26, 2021, 5:08pm

I did try to remove/resolve the dependency versions, though major version changes such as

sass-loader
          ^10.0.1 => @elastic/eui
          ^8.0.2 => @kbn/interpreter, @kbn/optimizer, @kbn/ui-framework, x-pack
        style-loader

would produce issues. I observe yarn build does not work.
Publishing forked eui is our last resource, seems like it has to be.

Thank you all for your responses.

system · June 23, 2021, 5:09pm

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
How to test EUI changes in Kibana(7.10.x) during development? Kibana	7	602	April 9, 2021
How to build kibana with local eui repository? Kibana	3	515	October 6, 2019
How to properly include @kbn packages in external plugins? Kibana kibana-plugin-development	3	954	May 16, 2021
Elastic UI for Kibana 6.1.3 Plugin? Kibana	4	1043	August 22, 2018
Using a higher version EUI in plugin Kibana	3	304	November 19, 2020

How to make EUI part of Kibana packages?

Related topics