[Doc] Add global definition to the Vite example, and offer to install the Roboto font locally

[slax57]

• Adding window.global = window to the Vite example allows to fix errors with some libs, e.g. react-floater, that would throw errors such as Uncaught ReferenceError: global is not defined
• Offering to install the Roboto font locally can help with local legislation compliance, such as the GDPR in Europe

[smeng9]

We should add a troubleshoot note to user that if they encounter Uncaught ReferenceError: global is not defined they should submit a bug report to the author of the library they are using.

Adding a window.global is the last resort as it may change the behavior of some other library that detects node environment based on whether global is defined or not.

[slax57]

@smeng9 I wasn't aware of that, thanks for letting us know!
Do you have any resources explaining a bit further why this could be a bad practice, and how the library maintainers should rather solve the issue?
Thanks.

[smeng9]

Hi @slax57

You can refer to npm docs about the recommended way library maintainer should do
https://docs.npmjs.com/cli/v9/configuring-npm/package-json#browser
to make the the package usable in both node and browser environment.

If package is set up correctly, bundlers will resolve using the browser field entry for a copy of the library that does not use global in browser, and main field for a copy of the library that does not use window in node.

However some of the packages do not follow this recommended path and only have a single main entry. Instead, they check existence of certain variables (like global), and may access file systems (which are not available inside browser). Adding a window.global may make some of the code that should only be executed in node environment to be executed in browser environment and such behavior may cause other side effects.

[djhi]

It seems this issue does not happen anymore, probably because our dependencies have been updated