Vite will add new instance of dat.gui if hot reloaded - Githubissues

vitejs / vite

Next generation frontend tooling. It's fast!

http://vitejs.dev

MIT License

67.1k stars 6.03k forks source link

Vite will add new instance of dat.gui if hot reloaded #1699

Closed fnick851 closed 3 years ago

fnick851 commented 3 years ago

[x] Read the docs.
[x] Use Vite >=2.0. (1.x is no longer supported)
[NA] If the issue is related to 1.x -> 2.0 upgrade, read the Migration Guide first.

Describe the bug

Vite's hot reload will add a new instance of dat.gui each time to the DOM. (I am actually not 100% sure if this is a bug or it is expected behavior.)

Reproduction

https://github.com/fnick851/vite-shader-water/tree/datgui-issue (on datgui-issue branch)

System Info

vite version: 2.0.0-beta.45
Operating System: macOS Big Sur x86 11.1
Node version: 14.15.4
Package manager (npm/yarn/pnpm) and version: npm 6.14.11

Logs (Optional if provided reproduction)

Run vite or vite build with the --debug flag.
Provide the error log here.

yyx990803 commented 3 years ago

This is "kind of" expected behavior because:

You are importing and using renderWaterScene in a Vue component
The Vue component is a HMR boundary, so when it hot updates, it re-imports its changed depdencies
The file that exports renderWaterScene creates dat-gui as a side-effect-on-import

What you should do is to avoid on-import side-effects in files that export code being used in Vue components - i.e. separate dat-gui setup logic from functions like renderWaterScene.