vite-semantic-ui-less-bug-replicate

A repository to provide the Vite team with a small project to demonstrate the bug.

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Project setup

1. Created project using create-vite and the react template.
2. Downgraded vite to 3.2.2 and @vitejs/plugin-react to 2.2.0.
3. Installed less 2.7.3, less-plugin-npm-import 2.1.0 and semantic-ui-less 2.5.0.
4. Added ThirdParty directory with Lato fonts, added SemanticTheme directory with customisation and added plugins directory to make semantic UI less work with the customisation.
5. Renamed App.css to App.less.
6. Added semantic-ui-less imports to App.less.
7. Added some semantic-ui-less icon classes to App.jsx as a test case to see if the fonts are being rendered.

Bug replication steps

npm install --save-dev vite@3.2.3
npm clean-install
npm run dev

Error messages

Run the following to see the error messages:

npm install --save-dev vite@3.2.3
npm clean-install
npm run build

Result

The fonts icons, brand-icons and outline-icons does not appear in dist/assets and the icons in App.jsx <i class="icon ..."></i> will not render because it is missing the font.

However the fonts in ThirdParty will be bundled because it hard codes the font path and name e.g. url('./LatoLatin-Regular.ttf').

Any vite version higher than 3.2.2 will exhibit the bug including the latest 4.5.0.