Elastic UI ‘Failed to fetch dynamically imported module’

[AimSteyz]

Hi,

when we try to display an icon of EuiIcon using veaury, we got this error

GET http://localhost:3000/node_modules/.vite/deps/assets/heart?import net::ERR_ABORTED 504 (Gateway Timeout) Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:3000/node_modules/.vite/deps/assets/heart?import

Step to reproduce the error:

• Install Eui yarn add @elastic/eui @elastic/datemath @emotion/react moment prop-types
• Import an EuiIcon and use the component import React from 'react'; import { EuiIcon } from '@elastic/eui'; export default () => { return( <EuiIcon type="heart" /> ); }

[devilwjp]

@AimSteyz I think this problem may be because your project is built with vite, and I found that EuiIcon uses dynamic import, but vite does not support dynamic import, but luckily I found a solution in the documentation of @elastic/eui.
https://github.com/elastic/eui/blob/main/wiki/consuming.md#failing-icon-imports

The following is an example of importing the heart icon in the vue3 file, then building it with vite, it works smoothly!

<script setup>
import { appendIconComponentCache } from '@elastic/eui/es/components/icon/icon';
import { icon as heart } from '@elastic/eui/es/components/icon/assets/heart';
import { EuiIcon } from '@elastic/eui';
import { applyReactInVue } from 'veaury'
// Only needs to be executed once in global scope
appendIconComponentCache({
  heart,
  // You can continue to add other icons
  // The key of the object corresponds to the type of EuiIcon
  //....
});
const EuiIconVue = applyReactInVue(EuiIcon)
</script>

<template>
  <EuiIconVue type="heart"/>
</template>

In fact, I also considered that @rollup/plugin-dynamic-import-vars can be used to solve the problem that vite does not support dynamic import, but EuiIcon does not follow the limitations of @rollup/plugin-dynamic-import-vars, so I gave up

[AimSteyz]

It work flawlessly for component like that, but would you have an idea on how to do it with some component like "combo box" https://elastic.github.io/eui/#/forms/combo-box (Second exemple, dont forget to import the css import "@elastic/eui/dist/eui_theme_light.css") When used it display this

With this error

[devilwjp]

@AimSteyz This problem still seems to be a dynamic import problem, you still need to add arrowDown using appendIconComponentCache in advance .

import { appendIconComponentCache } from '@elastic/eui/es/components/icon/icon';
import { icon as arrowDown } from '@elastic/eui/es/components/icon/assets/arraw_down';
appendIconComponentCache({
  arrowDown,
});

[AimSteyz]

I've try something similar but i might have done something wrong so it was not working the imported icons are not centered but i may find why, probably a css problem, thank you !