build(editor): Improve browser support for the n8n editor (#12064)

packages/editor-ui/.browserslistrc

@@ -1,3 +1,3 @@
-> 1%
+defaults
-last 2 versions
+cover 95% in US
-not ie <= 8
+cover 95% in alt-EU and last 2 years and not dead and fully supports es6-module and fully supports es6-module-dynamic-import

packages/editor-ui/package.json

@@ -95,8 +95,10 @@
     "@types/lodash-es": "^4.17.6",
     "@types/luxon": "^3.2.0",
     "@types/uuid": "catalog:",
+    "@vitejs/plugin-legacy": "^6.0.0",
     "@vitejs/plugin-vue": "catalog:frontend",
     "@vitest/coverage-v8": "catalog:frontend",
+    "browserslist-to-esbuild": "^2.1.1",
     "miragejs": "^0.1.48",
     "unplugin-icons": "^0.19.0",
     "unplugin-vue-components": "^0.27.2",

packages/editor-ui/vite.config.mts

@@ -6,11 +6,16 @@ import { vitestConfig } from '../design-system/vite.config.mts';
 import icons from 'unplugin-icons/vite';
 import iconsResolver from 'unplugin-icons/resolver';
 import components from 'unplugin-vue-components/vite';
+import browserslistToEsbuild from 'browserslist-to-esbuild';
+import legacy from '@vitejs/plugin-legacy';
+import browserslist from 'browserslist';
 
 const publicPath = process.env.VUE_APP_PUBLIC_PATH || '/';
 
 const { NODE_ENV } = process.env;
 
+const browsers = browserslist.loadConfig({ path: process.cwd() });
+
 const alias = [
 	{ find: '@', replacement: resolve(__dirname, 'src') },
 	{ find: 'stream', replacement: 'stream-browserify' },
@@ -54,6 +59,11 @@ const plugins = [
 		],
 	}),
 	vue(),
+	legacy({
+		modernTargets: browsers,
+		modernPolyfills: true,
+		renderLegacyChunks: false,
+	}),
 ];
 
 const { RELEASE: release } = process.env;
@@ -80,6 +90,7 @@ export default mergeConfig(
 		build: {
 			minify: !!release,
 			sourcemap: !!release,
+			target: browserslistToEsbuild(browsers),
 		},
 	}),
 	vitestConfig,