`global is not defined`
volkanunsal opened this issue · comments
- [√ ] Read the docs.
- [√] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
- [√] This is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
Describe the bug
I'm getting global is not defined error.
Reproduction
The header of the file has this comment block.
/*!
* The buffer module from node.js, for the browser.
*
* @author Feross Aboukhadijeh <http://feross.org>
* @license MIT
*/
/* eslint-disable no-proto */
It seems to be coming from a module that includes Node.js modules, and the browser equivalent has been included, and there is a global keyword in there, which vitejs cannot seem to handle.
System Info
vite@2.1.0
Hello @volkanunsal. Please provide a online reproduction by codesandbox or a minimal GitHub repository. Issues labeled by need reproduction will be closed if no activities in 3 days.
I'm also encountering this issue. It happens when trying to use the web3 package.
first process is not defined, then global is not defined, then Buffer is not defined
I recognize these as globals/builtins, but:
export default defineConfig({
plugins: [
reactRefresh(),
{ ...builtins({ crypto: true }), name: 'rollup-plugin-node-builtins' },
{ ...globals(), name: 'rollup-plugin-node-globals' },
],
define: {
'process.env': {},
global: {},
},
})
does not seem to actually do anything.
I'm getting the same error global is not defined when using react-i18next in my project. Here's a minimal repo that should reproduce the problem. https://github.com/Cyber3x/vite-i18n. The error is only present after building the project.
Vite doesn't include shims for Node variables like Webpack 4 does (in Version 5, shims also needs to be added by the user). Check other issues like #728, you can use rollup-plugin-node-globals like a previous comment (but it hasn't been updated for a while). Maybe this is also an option https://github.com/ionic-team/rollup-plugin-node-polyfills.
Another option is to use modern libraries that do not depend on node globals (or ask for updates in your current dependencies).
Let's close this issue because it is better to try to fix this by discussing it with the maintainers of each library. You can also start a Discussion about a particular library or join Vite Land to chat with others about possible solutions.
As a work around for anyone who stumbles upon this issue, if the library you are attempting to use is also provided via a CDN, you can use that CDN instead.
Since the CDN version is built for the browser it shouldn't have any node-only libraries so you will be able to use it in Vite. To do so first you will want to use the Vite CDN Plugin from Evan(currently unpublished) . After installing that plugin you can then use it to import your library via the CDN. The plugin will automatically download it and use it in place of the one installed via node_modules.
Here are two example repositories of this in action
https://github.com/jacobclevenger/vite-mediasoup-client-test
https://github.com/jacobclevenger/octokit-vite-example
I'm confused. Why is this issue closed? @felixakiragreen already mentioned that using the plugins mentioned above did not to solve the problem. I tried this method as well, and also tried using define to add globals to the environment, and it didn't work. Using modern libraries is not an option.
@volkanunsal Providing node shims is not a planned addition to Vite and since Webpack 5 is also removing I don't imagine it will ever be. If the libraries you are using are provided via a CDN you can use the workaround I posted above.
@volkanunsal if you would like to discuss this further, would you open a Discussion or join Vite Land to chat with others about possible solutions. Thanks!
@volkanunsal well we can't really help you if you don't want to have any discussion on it
For reference, if you only need to shim global, you can add
<script>window.global = window;</script>to your index.html