# FluentMaterial fails to compile via vite

**URL:** <https://forum.babylonjs.com/t/fluentmaterial-fails-to-compile-via-vite/51518>\
**Category:** Bugs\
**Tags:** gui, material, compilation, holographicbutton\
**Created:** [June 21, 2024, 2:48pm UTC](https://forum.babylonjs.com/t/fluentmaterial-fails-to-compile-via-vite/51518 "2024-06-21T14:48:55Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![simens\_green](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/simens_green/32/40577_2.png) [@simens\_green](https://forum.babylonjs.com/u/simens_green)\
**Post date:** [June 21, 2024, 2:48pm UTC](https://forum.babylonjs.com/t/fluentmaterial-fails-to-compile-via-vite/51518/1 "2024-06-21T14:48:55Z")

</div>

Repo:

> **[GitHub - simensgreen/bjs-vite-bug](https://github.com/simensgreen/bjs-vite-bug)**
>
> Contribute to simensgreen/bjs-vite-bug development by creating an account on GitHub.

Seems like somehow `index.html` content appears in shader code and breaks it down

---

<div class="post-metadata">

**Author:** ![simens\_green](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/simens_green/32/40577_2.png) [@simens\_green](https://forum.babylonjs.com/u/simens_green)\
**Post date:** [June 21, 2024, 3:05pm UTC](https://forum.babylonjs.com/t/fluentmaterial-fails-to-compile-via-vite/51518/2 "2024-06-21T15:05:12Z")

</div>

I created issue in the vite repo: [FluentMaterial fails to compile via vite · Issue #17542 · vitejs/vite · GitHub](https://github.com/vitejs/vite/issues/17542)

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [June 21, 2024, 3:51pm UTC](https://forum.babylonjs.com/t/fluentmaterial-fails-to-compile-via-vite/51518/3 "2024-06-21T15:51:05Z")

</div>

Hello and welcome!

The issue is not related to Vite.  
You mix different Babylon import types, with @ and without @.

Change your package json relevant lines to:

```auto
  "dependencies": {
    "@babylonjs/gui": "^7.12.0",
    "@babylonjs/core": "^7.12.0"
  }

```

Also change import in main.ts

```auto
import {
  ArcRotateCamera,
  Engine,
  Scene,
  TransformNode,
  Vector3,
} from "@babylonjs/core";
import { GUI3DManager, HolographicButton, SpherePanel } from "@babylonjs/gui/";

```

Then delete node\_modules folder completely and perform `npm i` again.  
It should work 🙂

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/2/b21d3ef79190bfdd6066a6ea021e17b1481547ad.jpeg)

---

<div class="post-metadata">

**Author:** ![simens\_green](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/simens_green/32/40577_2.png) [@simens\_green](https://forum.babylonjs.com/u/simens_green)\
**Post date:** [June 21, 2024, 4:55pm UTC](https://forum.babylonjs.com/t/fluentmaterial-fails-to-compile-via-vite/51518/4 "2024-06-21T16:55:12Z")

</div>

Thank you for quick answer and solution!