Feast UI fails to load in Vite due to dynamic icon imports (arrow_down module not found) #5429

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:

yarn create vite myapp --template react-ts
cd myapp
yarn

2. Install Feast UI and its dependencies:

yarn add @feast-dev/feast-ui @elastic/eui @emotion/react

3. Import Feast UI as it says in the current documentation

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(
  <React.StrictMode>
    <FeastUI />
  </React.StrictMode>
);

4. Run the development server

yarn dev

5. Observe the error in the browser console as well as on the screen

Specifications

• Version:

"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.