Allow to shim node modules inside define object in vite.config.js

[mecirmartin]

Clear and concise description of the problem

So i've been trying to use ViteJS and i've run into multiple problems regarding incompatibility of npm packages. I understand, that Vite is ESM only, but many npm packages are using node builtins. The unability to use these packages makes Vite much harder to use and much less versatile

Suggested solution

I thought the simplest solution would be to provide these shims inside the define object in vite.config.js. However i am unable to do just that. Here is screen of code where the crypto module is used inside react-refresh/babel plugin which i need to import and use inside my Vite project. When i comment this line out inside node_modules everything works fine

So I tried to shim crypto module, inside the define object like this

and i'm getting this error

Alternative

Only alternative to this solution is forking problematic npm packages and modifying the code itself to make it compatible with ESM modules, this is however very awkward and cumbersome solution.

Additional context

I tried to shim for example path module with path-browserify and i was not able to do that. Is there any problem with providing this feature? It would be very helpful if i could shim node builtins myself and use these packages inside Vite project

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[patak-dev]

This is not an intended use case for config.define. It's implemented as a straightforward text replacement without any syntax analysis. define should be used for CONSTANTS like process.env.FOO and __APP_VERSION__

I think that the best way to shim node builtins in packages is to use a rollup plugin like https://github.com/snowpackjs/rollup-plugin-polyfill-node. That hopefully will end up being adopted by the rollup org. I think there were some issues in with this plugin in Vite, but it is worth exploring how to iron out the details so we can start to recommend this (even in the docs)

About your issue in particular, that require shouldn't kick in at all in the browser because it is inside a guard. There was a related issue that is fixed as part of 4.2.0-beta.2 so it would be good to try it there, and if that doesn't work, please open a new bug report with a minimal reproduction. Thanks!

[mecirmartin]

@patak-js Thanks for info, will open a bug report