Feast UI fails to load in Vite due to dynamic icon imports (`arrow_down` module not found)
- Dominant language
- Python
- Stars
- 7.3k
- Forks
- 1.4k
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 15
Description
## Expected Behavior
Feast UI when imported as React module should work with Vite.
## Current Behavior
When integrating Feast UI into a Vite-based React project, the application fails to load, displaying the following error: `Error: Module not found in bundle: ./assets/arrow_down`.
## Steps to reproduce
How to get `Error: Module not found in bundle: ./assets/arrow_down`:
1. Create new React + TypeScript + Vite project by running the following commnd:
```bash
yarn create vite myapp --template react-ts
cd myapp
yarn
```
2. Install Feast UI and its dependencies:
```bash
yarn add @feast-dev/feast-ui @elastic/eui @emotion/react
```
3. Import Feast UI as it says in the [current documentation](https://docs.feast.dev/v0.49-branch/reference/alpha-web-ui)
```tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import '@feast-dev/feast-ui/dist/feast-ui.css';
import FeastUI from '@feast-dev/feast-ui';
ReactDOM.createRoot(document.getElementById('root')!).render(
);
```
4. Run the development server
```bash
yarn dev
```
5. Observe the error in the browser console as well as on the screen

### Specifications
- Version:
```json
"dependencies": {
"@elastic/eui": "^102.3.0",
"@emotion/react": "^11.14.0",
"@feast-dev/feast-ui": "^0.49.0",
"react": "18.3.1",
"react-dom": "18.3.1"
}
```
## Possible Solution
The issue stems from Elastic UI's use of dynamic imports for icons, which Vite cannot statically analyze. A potential solution is to pre-bundle the required icons by statically importing them.
Contributor guide
Assessment
This issue has not been assessed yet.