Fix JS polyfills missing after the Vite switch (#34758)

app/views/layouts/application.html.haml

@@ -28,6 +28,7 @@
     = theme_style_tags current_theme
     = vite_client_tag
     = vite_react_refresh_tag
+    = vite_polyfill_tag crossorigin: 'anonymous'
     -# Needed for the wicg-inert polyfill. It needs to be on it's own <style> tag, with this `id`
     = vite_stylesheet_tag 'styles/entrypoints/inert.scss', media: 'all', id: 'inert-style'
     = vite_typescript_tag 'common.ts', crossorigin: 'anonymous'

app/views/layouts/embedded.html.haml

@@ -13,6 +13,7 @@
 
     = vite_client_tag
     = vite_react_refresh_tag
+    = vite_polyfill_tag crossorigin: 'anonymous'
     = theme_style_tags 'mastodon-light'
     = vite_preload_file_tag "mastodon/locales/#{I18n.locale}.json"
     = render_initial_state

app/views/layouts/error.html.haml

@@ -7,6 +7,7 @@
     %meta{ content: 'width=device-width,initial-scale=1', name: 'viewport' }/
     = vite_client_tag
     = vite_react_refresh_tag
+    = vite_polyfill_tag crossorigin: 'anonymous'
     = theme_style_tags Setting.default_settings['theme']
     = vite_typescript_tag 'error.ts', crossorigin: 'anonymous'
   %body.error

lib/vite_ruby/sri_extensions.rb

@@ -119,6 +119,12 @@ module ViteRails::TagHelpers::IntegrityExtension
   rescue ViteRuby::MissingEntrypointError
     # Ignore this error, it is not critical if the file is not preloaded
   end
+
+  def vite_polyfill_tag(**)
+    entry = vite_manifest.path_and_integrity_for('polyfill', type: :virtual)
+
+    javascript_include_tag(type: 'module', src: entry[:path], integrity: entry[:integrity], **)
+  end
 end
 
 ViteRails::TagHelpers.prepend ViteRails::TagHelpers::IntegrityExtension

package.json

@@ -47,6 +47,7 @@
     "@react-spring/web": "^10.0.0",
     "@reduxjs/toolkit": "^2.0.1",
     "@use-gesture/react": "^10.3.1",
+    "@vitejs/plugin-legacy": "^6.1.1",
     "@vitejs/plugin-react": "^4.2.1",
     "arrow-key-navigation": "^1.2.0",
     "async-mutex": "^0.5.0",

vite.config.mts

@@ -10,6 +10,7 @@ import RailsPlugin from 'vite-plugin-rails';
 import { VitePWA } from 'vite-plugin-pwa';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import yaml from 'js-yaml';
+import legacy from '@vitejs/plugin-legacy';
 
 import { defineConfig, UserConfigFnPromise, UserConfig } from 'vite';
 import postcssPresetEnv from 'postcss-preset-env';
@@ -119,6 +120,10 @@ export const config: UserConfigFnPromise = async ({ mode, command }) => {
       }),
       MastodonServiceWorkerLocales(),
       MastodonEmojiCompressed(),
+      legacy({
+        renderLegacyChunks: false,
+        modernPolyfills: true,
+      }),
       VitePWA({
         srcDir: 'mastodon/service_worker',
         // We need to use injectManifest because we use our own service worker

yarn.lock

@@ -1029,7 +1029,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:^7.11.0":
+"@babel/preset-env@npm:^7.11.0, @babel/preset-env@npm:^7.26.9":
   version: 7.27.2
   resolution: "@babel/preset-env@npm:7.27.2"
   dependencies:
@@ -2488,6 +2488,7 @@ __metadata:
     "@types/redux-immutable": "npm:^4.0.3"
     "@types/requestidlecallback": "npm:^0.3.5"
     "@use-gesture/react": "npm:^10.3.1"
+    "@vitejs/plugin-legacy": "npm:^6.1.1"
     "@vitejs/plugin-react": "npm:^4.2.1"
     arrow-key-navigation: "npm:^1.2.0"
     async-mutex: "npm:^0.5.0"
@@ -4159,6 +4160,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitejs/plugin-legacy@npm:^6.1.1":
+  version: 6.1.1
+  resolution: "@vitejs/plugin-legacy@npm:6.1.1"
+  dependencies:
+    "@babel/core": "npm:^7.26.10"
+    "@babel/preset-env": "npm:^7.26.9"
+    browserslist: "npm:^4.24.4"
+    browserslist-to-esbuild: "npm:^2.1.1"
+    core-js: "npm:^3.41.0"
+    magic-string: "npm:^0.30.17"
+    regenerator-runtime: "npm:^0.14.1"
+    systemjs: "npm:^6.15.1"
+  peerDependencies:
+    terser: ^5.16.0
+    vite: ^6.0.0
+  checksum: 10c0/3a41098e422246d7ddbb6add678c1317474679a5e82e011947898cea5336fa8da9bb8fa625ab1284265f6ba123278fc2bf7c5b0b9b87febaaf865f14ac8e6ece
+  languageName: node
+  linkType: hard
+
 "@vitejs/plugin-react@npm:^4.2.1":
   version: 4.4.1
   resolution: "@vitejs/plugin-react@npm:4.4.1"
@@ -4805,6 +4825,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"browserslist-to-esbuild@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "browserslist-to-esbuild@npm:2.1.1"
+  dependencies:
+    meow: "npm:^13.0.0"
+  peerDependencies:
+    browserslist: "*"
+  bin:
+    browserslist-to-esbuild: cli/index.js
+  checksum: 10c0/4d1968efd72850949d5dfa355f4663c695a8fd7b259b19cc81ecd0ed33dd37bbd327475c644de3f2beb53e737c6e511c6e84ed3e97a2ff49f117505a7707c72d
+  languageName: node
+  linkType: hard
+
 "browserslist@npm:^4.24.0, browserslist@npm:^4.24.4":
   version: 4.24.4
   resolution: "browserslist@npm:4.24.4"
@@ -5202,7 +5235,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:^3.30.2":
+"core-js@npm:^3.30.2, core-js@npm:^3.41.0":
   version: 3.42.0
   resolution: "core-js@npm:3.42.0"
   checksum: 10c0/2913d3d5452d54ad92f058d66046782d608c05e037bcc523aab79c04454fe640998f94e6011292969d66dfa472f398b085ce843dcb362056532a5799c627184e
@@ -8327,7 +8360,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"meow@npm:^13.2.0":
+"meow@npm:^13.0.0, meow@npm:^13.2.0":
   version: 13.2.0
   resolution: "meow@npm:13.2.0"
   checksum: 10c0/d5b339ae314715bcd0b619dd2f8a266891928e21526b4800d49b4fba1cc3fff7e2c1ff5edd3344149fac841bc2306157f858e8c4d5eaee4d52ce52ad925664ce
@@ -10405,7 +10438,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regenerator-runtime@npm:^0.14.0":
+"regenerator-runtime@npm:^0.14.0, regenerator-runtime@npm:^0.14.1":
   version: 0.14.1
   resolution: "regenerator-runtime@npm:0.14.1"
   checksum: 10c0/1b16eb2c4bceb1665c89de70dcb64126a22bc8eb958feef3cd68fe11ac6d2a4899b5cd1b80b0774c7c03591dc57d16631a7f69d2daa2ec98100e2f29f7ec4cc4
@@ -11689,6 +11722,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"systemjs@npm:^6.15.1":
+  version: 6.15.1
+  resolution: "systemjs@npm:6.15.1"
+  checksum: 10c0/106e5751a49dbe4acb17fa1474a43b27fd26efbee1b322c00c04c08f3e95de756adfba828d743af89bef7fa10888da8a5c5ceb55dae5c42e4909b151168ad192
+  languageName: node
+  linkType: hard
+
 "table@npm:^6.9.0":
   version: 6.9.0
   resolution: "table@npm:6.9.0"