Open matths opened 5 months ago
This seems to only happen when there's no exports. So a workaround is to add a dummy export export const foo = ''
.
So can we conclude that compiling Svelte component as custom elements is using library mode but has no export but instead just defines a web component. And that's why there's no function wrapper around the code?
I tried that workaround, and indeed it can work as a workaround. I can add dummy exports to my entry points, of course. So, thank you, @sapphi-red.
But where to go from here? Do you suggest to add this workaround to Vite or to think about a more general solution that works without that dummy export?
I guess we can change the regex depending whether chunk.exports.length === 0
is true.
https://github.com/vitejs/vite/blob/8e54bbd74d86537b449641a6623b1bc3800e82b2/packages/vite/src/node/plugins/esbuild.ts#L306
My hypothesis is that when it is true there is no (const|var)\s+\S+\s*=\s*
part.
Adding a dummy export automatically will make the library declare a global variable (the name can be configured by output.name
) so it's not ideal.
I keep running into this problem when my svelte elements are recreated after small changes to the common codebase. I would really appreciate a general solution to this problem, but I need help from your side. @sapphi-red, do you see a way to prioritise this issue a bit more?
Describe the bug
We are bundling Svelte components as custom elements using Vite. We automized this step for a whole bunch of components and every now and then, there might be a component, whose bundle.js leads to conflicts with existing JS code on website we use the components. Worst case so far was a conflict with jQuery, because Vite bundling created a $ var in the global namespace.
There was a workaround PR for this more then a year ago, which does not work with
minify: true
. https://github.com/vitejs/vite/discussions/15489I describe the problem and my findings in this discussion: https://github.com/vitejs/vite/discussions/15489
Usually esbuild wraps everything inside an IIFE to have a scope other than the global scope so minified variables does not conflict. Also esbuild is adding those three to four variables, lets call them helpers.
Vite then again does not take advantage of this IIFE, but instead explicitly set the format option to undefined as stated in this comment: https://github.com/vitejs/vite/blob/5d5508311f9856de69babd72dc4de0e7c21c7ae8/packages/vite/src/node/plugins/esbuild.ts#L281-L290
I think it does so, because it has kind of a multi stage bundling mechanic and the first one already puts an IIFE around the code.
So the old workaround tried to move the variables inside the existing IIFE, but this does not work, when code was minified.
Reproduction
https://github.com/matths/global-namespace-pollution
Steps to reproduce
run
npm install
followed mynpm run vite
. have a look at vite/bundle.js and vite/bundle.min.js and see that there are variables outside the IIFE which might conflict with global variables from other JS packages on the same website.System Info
Used Package Manager
npm
Logs
No response
Validations