mirror of
				https://github.com/lingble/chatwoot.git
				synced 2025-10-31 11:08:04 +00:00 
			
		
		
		
	feat: use iife build for sdk (#10255)
				
					
				
			Vite uses `Rollup` for bundling, when building the sdk, we effectively run a separate vite config, with `Library Mode`. When migrating from Webpack to Vite, I selected `umd` format, i.e. Universal Module Definition, which works as `amd`, `cjs` and `iife` all in one. However a lot of Chatwoot users ran into issues where UMD sdk.js won't work. Especially so when used with Google Tag Manager. As a hotfix we moved the format from `umd` to `cjs`. Here's the thing CJS is supposed to be used for Node packages. But for some-reason it was working on browsers too, its no surprising, since the output is a valid JS and the code we wrote was written for the browser. There's a catch though, when minifying, esbuild would use tokens like `$` and `_`, since `CJS` build is not scoped, unlike a `UMD` file, or (spoiler alert) `IIFE`. Any declarations would be global, and websites using `jQuery` (uff, culture) and `underscore-js` would break. We pushed another hotfix disabling the name replacement in `esbuild` unless we test out `IIFE` builds (which is this PR) This PR fixes this by using `IIFE` instead, it is always scoped in a function, so it never binds things globally, unless specifically written to do so (example. `window.$chatwoot`). I've tested this SDK on Safari, Chrome and iOS Safari on paperlayer test site, it seems to be working fine. The sdk build is also scoped correctly. --------- Co-authored-by: Pranav <pranav@chatwoot.com>
This commit is contained in:
		| @@ -42,11 +42,6 @@ if (isLibraryMode) { | |||||||
|   plugins = [vue(vueOptions)]; |   plugins = [vue(vueOptions)]; | ||||||
| } | } | ||||||
|  |  | ||||||
| const esbuildOptions = { |  | ||||||
|   minifyIdentifiers: false, |  | ||||||
|   keepNames: true, |  | ||||||
| }; |  | ||||||
|  |  | ||||||
| export default defineConfig({ | export default defineConfig({ | ||||||
|   plugins: plugins, |   plugins: plugins, | ||||||
|   build: { |   build: { | ||||||
| @@ -71,7 +66,7 @@ export default defineConfig({ | |||||||
|     lib: isLibraryMode |     lib: isLibraryMode | ||||||
|       ? { |       ? { | ||||||
|           entry: path.resolve(__dirname, './app/javascript/entrypoints/sdk.js'), |           entry: path.resolve(__dirname, './app/javascript/entrypoints/sdk.js'), | ||||||
|           formats: ['cjs'], // CJS format for single file |           formats: ['iife'], // IIFE format for single file | ||||||
|           name: 'sdk', |           name: 'sdk', | ||||||
|         } |         } | ||||||
|       : undefined, |       : undefined, | ||||||
| @@ -112,5 +107,4 @@ export default defineConfig({ | |||||||
|     mockReset: true, |     mockReset: true, | ||||||
|     clearMocks: true, |     clearMocks: true, | ||||||
|   }, |   }, | ||||||
|   esbuild: isLibraryMode ? esbuildOptions : undefined, |  | ||||||
| }); | }); | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user
	 Shivam Mishra
					Shivam Mishra