remove references to webpack

.github/renovate.json5

@@ -25,23 +25,6 @@
         'tesseract.js', // Requires code changes
         'react-hotkeys', // Requires code changes
 
-        // Requires Webpacker upgrade or replacement
-        '@svgr/webpack',
-        '@types/webpack',
-        'babel-loader',
-        'compression-webpack-plugin',
-        'css-loader',
-        'imports-loader',
-        'mini-css-extract-plugin',
-        'postcss-loader',
-        'sass-loader',
-        'terser-webpack-plugin',
-        'webpack',
-        'webpack-assets-manifest',
-        'webpack-bundle-analyzer',
-        'webpack-dev-server',
-        'webpack-cli',
-
         // react-router: Requires manual upgrade
         'history',
         'react-router-dom',

Procfile.dev

@@ -1,4 +1,4 @@
 web: env PORT=3000 RAILS_ENV=development bundle exec puma -C config/puma.rb
 sidekiq: env PORT=3000 RAILS_ENV=development bundle exec sidekiq
 stream: env PORT=4000 yarn workspace @mastodon/streaming start
-webpack: bin/webpack-dev-server
+vite: bin/vite dev

app/javascript/entrypoints/inert.ts

@@ -1,4 +1,4 @@
-/* Placeholder file to have `inert.scss` compiled by Webpack
+/* Placeholder file to have `inert.scss` compiled by Vite
    This is used by the `wicg-inert` polyfill */
 
 import '../styles/inert.scss';

app/javascript/entrypoints/public.tsx

@@ -149,9 +149,7 @@ function loaded() {
   const reactComponents = document.querySelectorAll('[data-component]');
 
   if (reactComponents.length > 0) {
-    import(
+    import('../mastodon/containers/media_container')
-      /* webpackChunkName: "containers/media_container" */ '../mastodon/containers/media_container'
-    )
       .then(({ default: MediaContainer }) => {
         reactComponents.forEach((component) => {
           Array.from(component.children).forEach((child) => {

app/javascript/mastodon/common.js

@@ -1,7 +1,8 @@
 import Rails from '@rails/ujs';
 
 export function start() {
-  require.context('../images/', true, /\.(jpg|png|svg)$/);
+  // TODO: Find alternative to this
+  // require.context('../images/', true, /\.(jpg|png|svg)$/);
 
   try {
     Rails.start();

app/javascript/mastodon/features/ui/util/async-components.js

@@ -1,235 +1,235 @@
 export function EmojiPicker () {
-  return import(/* webpackChunkName: "emoji_picker" */'../../emoji/emoji_picker');
+  return import('../../emoji/emoji_picker');
 }
 
 export function Compose () {
-  return import(/* webpackChunkName: "features/compose" */'../../compose');
+  return import('../../compose');
 }
 
 export function Notifications () {
-  return import(/* webpackChunkName: "features/notifications" */'../../notifications_v2');
+  return import('../../notifications_v2');
 }
 
 export function HomeTimeline () {
-  return import(/* webpackChunkName: "features/home_timeline" */'../../home_timeline');
+  return import('../../home_timeline');
 }
 
 export function PublicTimeline () {
-  return import(/* webpackChunkName: "features/public_timeline" */'../../public_timeline');
+  return import('../../public_timeline');
 }
 
 export function CommunityTimeline () {
-  return import(/* webpackChunkName: "features/community_timeline" */'../../community_timeline');
+  return import('../../community_timeline');
 }
 
 export function Firehose () {
-  return import(/* webpackChunkName: "features/firehose" */'../../firehose');
+  return import('../../firehose');
 }
 
 export function HashtagTimeline () {
-  return import(/* webpackChunkName: "features/hashtag_timeline" */'../../hashtag_timeline');
+  return import('../../hashtag_timeline');
 }
 
 export function DirectTimeline() {
-  return import(/* webpackChunkName: "features/direct_timeline" */'../../direct_timeline');
+  return import('../../direct_timeline');
 }
 
 export function ListTimeline () {
-  return import(/* webpackChunkName: "features/list_timeline" */'../../list_timeline');
+  return import('../../list_timeline');
 }
 
 export function Lists () {
-  return import(/* webpackChunkName: "features/lists" */'../../lists');
+  return import('../../lists');
 }
 
 export function Status () {
-  return import(/* webpackChunkName: "features/status" */'../../status');
+  return import('../../status');
 }
 
 export function GettingStarted () {
-  return import(/* webpackChunkName: "features/getting_started" */'../../getting_started');
+  return import('../../getting_started');
 }
 
 export function KeyboardShortcuts () {
-  return import(/* webpackChunkName: "features/keyboard_shortcuts" */'../../keyboard_shortcuts');
+  return import('../../keyboard_shortcuts');
 }
 
 export function PinnedStatuses () {
-  return import(/* webpackChunkName: "features/pinned_statuses" */'../../pinned_statuses');
+  return import('../../pinned_statuses');
 }
 
 export function AccountTimeline () {
-  return import(/* webpackChunkName: "features/account_timeline" */'../../account_timeline');
+  return import('../../account_timeline');
 }
 
 export function AccountGallery () {
-  return import(/* webpackChunkName: "features/account_gallery" */'../../account_gallery');
+  return import('../../account_gallery');
 }
 
 export function AccountFeatured() {
-  return import(/* webpackChunkName: "features/account_featured" */'../../account_featured');
+  return import('../../account_featured');
 }
 
 export function Followers () {
-  return import(/* webpackChunkName: "features/followers" */'../../followers');
+  return import('../../followers');
 }
 
 export function Following () {
-  return import(/* webpackChunkName: "features/following" */'../../following');
+  return import('../../following');
 }
 
 export function Reblogs () {
-  return import(/* webpackChunkName: "features/reblogs" */'../../reblogs');
+  return import('../../reblogs');
 }
 
 export function Favourites () {
-  return import(/* webpackChunkName: "features/favourites" */'../../favourites');
+  return import('../../favourites');
 }
 
 export function FollowRequests () {
-  return import(/* webpackChunkName: "features/follow_requests" */'../../follow_requests');
+  return import('../../follow_requests');
 }
 
 export function FavouritedStatuses () {
-  return import(/* webpackChunkName: "features/favourited_statuses" */'../../favourited_statuses');
+  return import('../../favourited_statuses');
 }
 
 export function FollowedTags () {
-  return import(/* webpackChunkName: "features/followed_tags" */'../../followed_tags');
+  return import('../../followed_tags');
 }
 
 export function BookmarkedStatuses () {
-  return import(/* webpackChunkName: "features/bookmarked_statuses" */'../../bookmarked_statuses');
+  return import('../../bookmarked_statuses');
 }
 
 export function Blocks () {
-  return import(/* webpackChunkName: "features/blocks" */'../../blocks');
+  return import('../../blocks');
 }
 
 export function DomainBlocks () {
-  return import(/* webpackChunkName: "features/domain_blocks" */'../../domain_blocks');
+  return import('../../domain_blocks');
 }
 
 export function Mutes () {
-  return import(/* webpackChunkName: "features/mutes" */'../../mutes');
+  return import('../../mutes');
 }
 
 export function MuteModal () {
-  return import(/* webpackChunkName: "modals/mute_modal" */'../components/mute_modal');
+  return import('../components/mute_modal');
 }
 
 export function BlockModal () {
-  return import(/* webpackChunkName: "modals/block_modal" */'../components/block_modal');
+  return import('../components/block_modal');
 }
 
 export function DomainBlockModal () {
-  return import(/* webpackChunkName: "modals/domain_block_modal" */'../components/domain_block_modal');
+  return import('../components/domain_block_modal');
 }
 
 export function ReportModal () {
-  return import(/* webpackChunkName: "modals/report_modal" */'../components/report_modal');
+  return import('../components/report_modal');
 }
 
 export function IgnoreNotificationsModal () {
-  return import(/* webpackChunkName: "modals/domain_block_modal" */'../components/ignore_notifications_modal');
+  return import('../components/ignore_notifications_modal');
 }
 
 export function MediaGallery () {
-  return import(/* webpackChunkName: "status/media_gallery" */'../../../components/media_gallery');
+  return import('../../../components/media_gallery');
 }
 
 export function Video () {
-  return import(/* webpackChunkName: "features/video" */'../../video');
+  return import('../../video');
 }
 
 export function EmbedModal () {
-  return import(/* webpackChunkName: "modals/embed_modal" */'../components/embed_modal');
+  return import('../components/embed_modal');
 }
 
 export function ListAdder () {
-  return import(/*webpackChunkName: "features/list_adder" */'../../list_adder');
+  return import('../../list_adder');
 }
 
 export function Tesseract () {
-  return import(/*webpackChunkName: "tesseract" */'tesseract.js');
+  return import('tesseract.js');
 }
 
 export function Audio () {
-  return import(/* webpackChunkName: "features/audio" */'../../audio');
+  return import('../../audio');
 }
 
 export function Directory () {
-  return import(/* webpackChunkName: "features/directory" */'../../directory');
+  return import('../../directory');
 }
 
 export function OnboardingProfile () {
-  return import(/* webpackChunkName: "features/onboarding" */'../../onboarding/profile');
+  return import('../../onboarding/profile');
 }
 
 export function OnboardingFollows () {
-  return import(/* webpackChunkName: "features/onboarding" */'../../onboarding/follows');
+  return import('../../onboarding/follows');
 }
 
 export function CompareHistoryModal () {
-  return import(/*webpackChunkName: "modals/compare_history_modal" */'../components/compare_history_modal');
+  return import('../components/compare_history_modal');
 }
 
 export function Explore () {
-  return import(/* webpackChunkName: "features/explore" */'../../explore');
+  return import('../../explore');
 }
 
 export function Search () {
-  return import(/* webpackChunkName: "features/explore" */'../../search');
+  return import('../../search');
 }
 
 export function FilterModal () {
-  return import(/*webpackChunkName: "modals/filter_modal" */'../components/filter_modal');
+  return import('../components/filter_modal');
 }
 
 export function InteractionModal () {
-  return import(/*webpackChunkName: "modals/interaction_modal" */'../../interaction_modal');
+  return import('../../interaction_modal');
 }
 
 export function SubscribedLanguagesModal () {
-  return import(/*webpackChunkName: "modals/subscribed_languages_modal" */'../../subscribed_languages_modal');
+  return import('../../subscribed_languages_modal');
 }
 
 export function ClosedRegistrationsModal () {
-  return import(/*webpackChunkName: "modals/closed_registrations_modal" */'../../closed_registrations_modal');
+  return import('../../closed_registrations_modal');
 }
 
 export function About () {
-  return import(/*webpackChunkName: "features/about" */'../../about');
+  return import('../../about');
 }
 
 export function PrivacyPolicy () {
-  return import(/*webpackChunkName: "features/privacy_policy" */'../../privacy_policy');
+  return import('../../privacy_policy');
 }
 
 export function TermsOfService () {
-  return import(/*webpackChunkName: "features/terms_of_service" */'../../terms_of_service');
+  return import('../../terms_of_service');
 }
 
 export function NotificationRequests () {
-  return import(/*webpackChunkName: "features/notifications/requests" */'../../notifications/requests');
+  return import('../../notifications/requests');
 }
 
 export function NotificationRequest () {
-  return import(/*webpackChunkName: "features/notifications/request" */'../../notifications/request');
+  return import('../../notifications/request');
 }
 
 export function LinkTimeline () {
-  return import(/*webpackChunkName: "features/link_timeline" */'../../link_timeline');
+  return import('../../link_timeline');
 }
 
 export function AnnualReportModal () {
-  return import(/*webpackChunkName: "modals/annual_report_modal" */'../components/annual_report_modal');
+  return import('../components/annual_report_modal');
 }
 
 export function ListEdit () {
-  return import(/*webpackChunkName: "features/lists" */'../../lists/new');
+  return import('../../lists/new');
 }
 
 export function ListMembers () {
-  return import(/* webpackChunkName: "features/lists" */'../../lists/members');
+  return import('../../lists/members');
 }

app/javascript/mastodon/load_keyboard_extensions.js

@@ -3,7 +3,7 @@
 // can at least log in using KaiOS devices).
 
 function importArrowKeyNavigation() {
-  return import(/* webpackChunkName: "arrow-key-navigation" */ 'arrow-key-navigation');
+  return import('arrow-key-navigation');
 }
 
 export default function loadKeyboardExtensions() {

app/javascript/mastodon/performance.js

@@ -1,7 +1,6 @@
 //
 // Tools for performance debugging, only enabled in development mode.
 // Open up Chrome Dev Tools, then Timeline, then User Timing to see output.
-// Also see config/webpack/loaders/mark.js for the webpack loader marks.
 
 import * as marky from 'marky';
 

app/javascript/mastodon/polyfills/index.ts

@@ -5,7 +5,7 @@
 import { loadIntlPolyfills } from './intl';
 
 function importExtraPolyfills() {
-  return import(/* webpackChunkName: "extra_polyfills" */ './extra_polyfills');
+  return import('./extra_polyfills');
 }
 
 export function loadPolyfills() {

app/javascript/mastodon/polyfills/intl.ts

@@ -68,11 +68,9 @@ async function loadIntlPluralRulesPolyfills(locale: string) {
 //   }
 //   // Load the polyfill 1st BEFORE loading data
 //   await import(
-//     /* webpackChunkName: "i18n-relativetimeformat-polyfill" */
 //     '@formatjs/intl-relativetimeformat/polyfill-force'
 //   );
 //   await import(
-//     /* webpackChunkName: "i18n-relativetimeformat-polyfill-[request]" */
 //     `@formatjs/intl-relativetimeformat/locale-data/${unsupportedLocale}`
 //   );
 // }

bin/webpack

@@ -1,19 +0,0 @@
-#!/usr/bin/env ruby
-
-ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
-ENV["NODE_ENV"]  ||= "development"
-
-require "pathname"
-ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
-  Pathname.new(__FILE__).realpath)
-
-require "rubygems"
-require "bundler/setup"
-
-require "webpacker"
-require "webpacker/webpack_runner"
-
-APP_ROOT = File.expand_path("..", __dir__)
-Dir.chdir(APP_ROOT) do
-  Webpacker::WebpackRunner.run(ARGV)
-end

bin/webpack-dev-server

@@ -1,19 +0,0 @@
-#!/usr/bin/env ruby
-
-ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
-ENV["NODE_ENV"]  ||= "development"
-
-require "pathname"
-ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
-  Pathname.new(__FILE__).realpath)
-
-require "rubygems"
-require "bundler/setup"
-
-require "webpacker"
-require "webpacker/dev_server_runner"
-
-APP_ROOT = File.expand_path("..", __dir__)
-Dir.chdir(APP_ROOT) do
-  Webpacker::DevServerRunner.run(ARGV)
-end

eslint.config.mjs

@@ -244,7 +244,6 @@ export default tseslint.config([
         {
           devDependencies: [
             'eslint.config.mjs',
-            'config/webpack/**',
             'app/javascript/mastodon/performance.js',
             'app/javascript/mastodon/test_setup.js',
             'app/javascript/mastodon/test_helpers.tsx',
@@ -252,7 +251,6 @@ export default tseslint.config([
           ],
         },
       ],
-      'import/no-webpack-loader-syntax': 'error',
 
       'react/jsx-filename-extension': [
         'error',
@@ -288,7 +286,6 @@ export default tseslint.config([
       '**/*.config.js',
       '**/.*rc.js',
       '**/ide-helper.js',
-      'config/webpack/**/*',
       'config/formatjs-formatter.js',
     ],
 

package.json

@@ -10,8 +10,8 @@
     "streaming"
   ],
   "scripts": {
-    "build:development": "cross-env RAILS_ENV=development NODE_ENV=development ./bin/webpack",
+    "build:development": "cross-env RAILS_ENV=development NODE_ENV=development ./bin/vite build",
-    "build:production": "cross-env RAILS_ENV=production NODE_ENV=production ./bin/webpack",
+    "build:production": "cross-env RAILS_ENV=production NODE_ENV=production ./bin/vite build",
     "fix:js": "eslint . --cache --fix",
     "fix:css": "stylelint --fix \"**/*.{css,scss}\"",
     "fix": "yarn fix:js && yarn fix:css",
@@ -34,14 +34,6 @@
   },
   "private": true,
   "dependencies": {
-    "@babel/core": "^7.22.1",
-    "@babel/plugin-transform-nullish-coalescing-operator": "^7.22.3",
-    "@babel/plugin-transform-react-inline-elements": "^7.21.0",
-    "@babel/plugin-transform-runtime": "^7.22.4",
-    "@babel/preset-env": "^7.22.4",
-    "@babel/preset-react": "^7.22.3",
-    "@babel/preset-typescript": "^7.21.5",
-    "@babel/runtime": "^7.22.3",
     "@csstools/stylelint-formatter-github": "^1.0.0",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^10.0.0",
@@ -52,20 +44,13 @@
     "@rails/ujs": "7.1.501",
     "@react-spring/web": "^9.7.5",
     "@reduxjs/toolkit": "^2.0.1",
-    "@svgr/webpack": "^5.5.0",
     "@use-gesture/react": "^10.3.1",
     "arrow-key-navigation": "^1.2.0",
     "async-mutex": "^0.5.0",
     "axios": "^1.4.0",
-    "babel-loader": "^8.3.0",
-    "babel-plugin-formatjs": "^10.5.37",
-    "babel-plugin-lodash": "patch:babel-plugin-lodash@npm%3A3.3.4#~/.yarn/patches/babel-plugin-lodash-npm-3.3.4-c7161075b6.patch",
-    "babel-plugin-preval": "^5.1.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "blurhash": "^2.0.5",
     "classnames": "^2.3.2",
     "color-blend": "^4.0.0",
-    "compression-webpack-plugin": "^6.1.2",
     "core-js": "^3.30.2",
     "cross-env": "^7.0.3",
     "detect-passive-events": "^2.0.3",
@@ -111,23 +96,16 @@
     "stacktrace-js": "^2.0.2",
     "stringz": "^2.1.0",
     "substring-trie": "^1.0.2",
-    "terser-webpack-plugin": "^4.2.3",
     "tesseract.js": "^6.0.0",
     "tiny-queue": "^0.2.1",
     "twitter-text": "3.1.0",
     "use-debounce": "^10.0.0",
     "vite": "^6.2.6",
-    "webpack": "^4.47.0",
-    "webpack-assets-manifest": "^4.0.6",
-    "webpack-bundle-analyzer": "^4.8.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-merge": "^6.0.0",
     "wicg-inert": "^3.1.2",
     "workbox-expiration": "^7.0.0",
     "workbox-precaching": "^7.0.0",
     "workbox-routing": "^7.0.0",
     "workbox-strategies": "^7.0.0",
-    "workbox-webpack-plugin": "^7.0.0",
     "workbox-window": "^7.0.0"
   },
   "devDependencies": {
@@ -136,12 +114,12 @@
     "@testing-library/dom": "^10.2.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
-    "@types/babel__core": "^7.20.1",
     "@types/emoji-mart": "3.0.14",
     "@types/escape-html": "^1.0.2",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/http-link-header": "^1.0.3",
     "@types/intl": "^1.2.0",
+    "@types/jest": "^29.5.14",
     "@types/js-yaml": "^4.0.5",
     "@types/lodash": "^4.14.195",
     "@types/object-assign": "^4.0.30",
@@ -160,8 +138,6 @@
     "@types/react-toggle": "^4.0.3",
     "@types/redux-immutable": "^4.0.3",
     "@types/requestidlecallback": "^0.3.5",
-    "@types/webpack": "^4.41.33",
-    "@types/webpack-env": "^1.18.4",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^9.23.0",
     "eslint-import-resolver-typescript": "^4.2.5",
@@ -180,18 +156,17 @@
     "stylelint": "^16.11.0",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-standard-scss": "^14.0.0",
+    "ts-jest": "^29.3.2",
     "typescript": "~5.7.3",
-    "typescript-eslint": "^8.28.0",
+    "typescript-eslint": "^8.29.1",
     "vite-plugin-rails": "^0.5.0",
     "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^3.1.1",
+    "vitest": "^3.1.1"
-    "webpack-dev-server": "^3.11.3"
   },
   "resolutions": {
     "@types/react": "^18.2.7",
     "@types/react-dom": "^18.2.4",
-    "kind-of": "^6.0.3",
+    "kind-of": "^6.0.3"
-    "webpack/terser-webpack-plugin": "^4.2.3"
   },
   "peerDependenciesMeta": {
     "react": {

tsconfig.json

@@ -12,7 +12,7 @@
     "noUncheckedIndexedAccess": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "types": ["vite/client", "vitest/globals", "@types/webpack-env"],
+    "types": ["vite/client", "vitest/globals"],
     "baseUrl": "./",
     "incremental": true,
     "tsBuildInfoFile": "tmp/cache/tsconfig.tsbuildinfo",
@@ -26,6 +26,7 @@
   },
   "include": [
     "vite.config.mts",
+    "config/vite",
     "app/javascript/mastodon",
     "app/javascript/entrypoints",
     "app/javascript/types"

vite.config.mts

@@ -1,43 +1,84 @@
 /// <reference types="vitest" />
 
-import fs from 'fs';
 import path from 'path';
 
 import react from '@vitejs/plugin-react';
-import RailsPlugin from 'vite-plugin-rails';
 import svgr from 'vite-plugin-svgr';
 import { defineConfig, configDefaults } from 'vitest/config';
+import postcssPresetEnv from 'postcss-preset-env';
 
-const sourceCodeDir = 'app/javascript';
+import { manifestSRI } from './config/vite/plugin-manifest-sri';
-const items = fs.readdirSync(sourceCodeDir);
-const directories = items.filter((item) =>
-  fs.lstatSync(path.join(sourceCodeDir, item)).isDirectory(),
-);
-const aliasesFromJavascriptRoot: Record<string, string> = {};
-directories.forEach((directory) => {
-  aliasesFromJavascriptRoot[directory] = path.resolve(
-    __dirname,
-    sourceCodeDir,
-    directory,
-  );
-});
 
 export default defineConfig({
-  resolve: {
+  root: './app/javascript/entrypoints',
-    alias: {
+  css: {
-      ...aliasesFromJavascriptRoot,
+    postcss: {
+      plugins: [
+        postcssPresetEnv({
+          features: {
+            'logical-properties-and-values': false,
+          },
+        }),
+      ],
     },
   },
-  plugins: [
+  resolve: {
-    RailsPlugin(),
+    alias: {
-    react({
+      mastodon: path.resolve(__dirname, 'app/javascript/mastodon'),
-      include: ['**/*.jsx', '**/*.tsx'],
+      '@': path.resolve(__dirname, 'app/javascript'),
-      babel: {
+    },
-        plugins: ['formatjs', 'preval', 'transform-react-remove-prop-types'],
+  },
+  build: {
+    commonjsOptions: { transformMixedEsModules: true },
+    outDir: path.resolve(__dirname, '.dist'),
+    emptyOutDir: true,
+    manifest: 'manifest.json',
+    rollupOptions: {
+      input: {
+        admin: path.resolve(__dirname, 'app/javascript/entrypoints/admin.tsx'),
+        application: path.resolve(
+          __dirname,
+          'app/javascript/entrypoints/application.ts',
+        ),
+        twoFactor: path.resolve(
+          __dirname,
+          'app/javascript/entrypoints/two_factor_authentication.ts',
+        ),
       },
-    }),
+      output: {
-    svgr(),
+        chunkFileNames(chunkInfo) {
-  ],
+          if (
+            /mastodon\/locales\/[a-zA-Z-]+\.json/.exec(chunkInfo.facadeModuleId)
+          ) {
+            // put all locale files in `intl/`
+            return `intl/[name]-[hash].js`;
+          } else if (
+            /node_modules\/@formatjs\//.exec(chunkInfo.facadeModuleId)
+          ) {
+            // use a custom name for formatjs polyfill files
+            const name = /node_modules\/@formatjs\/([^/]+)\//.exec(
+              chunkInfo.facadeModuleId,
+            );
+
+            if (name?.[1]) {
+              return `intl/[name]-${name[1]}-[hash].js`;
+            }
+          } else if (chunkInfo.name === 'index' && chunkInfo.facadeModuleId) {
+            // Use a custom name for chunks, to avoid having too many of them called "index"
+            const parts = chunkInfo.facadeModuleId.split('/');
+
+            const parent = parts.at(-2);
+
+            if (parent) {
+              return `${parent}-[name]-[hash].js`;
+            }
+          }
+          return `[name]-[hash].js`;
+        },
+      },
+    },
+  },
+  plugins: [react(), svgr(), manifestSRI()],
   test: {
     environment: 'jsdom',
     include: [

vite.config.ts

@@ -1,77 +0,0 @@
-import path from 'node:path';
-
-import postcssPresetEnv from 'postcss-preset-env';
-import { defineConfig } from 'vite';
-
-import { manifestSRI } from './config/vite/plugin-manifest-sri';
-
-// eslint-disable-next-line import/no-default-export
-export default defineConfig({
-  root: './app/javascript/entrypoints',
-  css: {
-    postcss: {
-      plugins: [
-        postcssPresetEnv({
-          features: {
-            'logical-properties-and-values': false,
-          },
-        }),
-      ],
-    },
-  },
-  build: {
-    commonjsOptions: { transformMixedEsModules: true },
-    outDir: path.resolve(__dirname, '.dist'),
-    emptyOutDir: true,
-    manifest: 'manifest.json',
-    rollupOptions: {
-      input: {
-        admin: path.resolve(__dirname, 'app/javascript/entrypoints/admin.tsx'),
-        application: path.resolve(
-          __dirname,
-          'app/javascript/entrypoints/application.ts',
-        ),
-        twoFactor: path.resolve(
-          __dirname,
-          'app/javascript/entrypoints/two_factor_authentication.ts',
-        ),
-      },
-      output: {
-        chunkFileNames: (chunkInfo) => {
-          if (
-            chunkInfo.facadeModuleId?.match(
-              /mastodon\/locales\/[a-zA-Z-]+\.json/,
-            )
-          ) {
-            // put all locale files in `intl/`
-            return `intl/[name]-[hash].js`;
-          } else if (
-            chunkInfo.facadeModuleId?.match(/node_modules\/@formatjs\//)
-          ) {
-            // use a custom name for formatjs polyfill files
-            const name = /node_modules\/@formatjs\/([^/]+)\//.exec(
-              chunkInfo.facadeModuleId,
-            );
-
-            if (name?.[1]) return `intl/[name]-${name[1]}-[hash].js`;
-          } else if (chunkInfo.name === 'index' && chunkInfo.facadeModuleId) {
-            // Use a custom name for chunks, to avoid having too many of them called "index"
-            const parts = chunkInfo.facadeModuleId.split('/');
-
-            const parent = parts.at(-2);
-
-            if (parent) return `${parent}-[name]-[hash].js`;
-          }
-          return `[name]-[hash].js`;
-        },
-      },
-    },
-  },
-  plugins: [manifestSRI()],
-  resolve: {
-    alias: {
-      mastodon: path.resolve(__dirname, 'app/javascript/mastodon'),
-      '@': path.resolve(__dirname, 'app/javascript'),
-    },
-  },
-});