The problem is because vite doesn’t define a global
field in window
as webpack does. And some libraries relies on it since webpack is much more older than vite.
Just insert at the very start, before any library import:
// init.js
window.global ||= window;
A good way to have the above code before any import is to write in new file, let’s call it init.js
, and import it as first.
// in index.js or main.js file
import "./init"
// import your app and libraries after...
import App from './App'
import ...
✅ You’re good to go !
👉🏻 About other answers saying to set the define
in Vite configuration
WARNING
Because it’s implemented as straightforward text replacements without
any syntax analysis, we recommend using define for CONSTANTS only.
For example, process.env.FOO and APP_VERSION are good fits. But
process or global should not be put into this option. Variables can be
shimmed or polyfilled instead.
From Vite official documentation