Remove everything Webpacker-related

.eslintrc.js

@@ -197,7 +197,6 @@ module.exports = defineConfig({
         devDependencies: [
           '.eslintrc.js',
           'vite.config.mts',
-          'config/webpack/**',
           'app/javascript/mastodon/performance.js',
           'app/javascript/mastodon/test_setup.js',
           'app/javascript/**/__tests__/**',
@@ -210,7 +209,6 @@ module.exports = defineConfig({
     'import/no-relative-packages': 'error',
     'import/no-self-import': 'error',
     'import/no-useless-path-segments': 'error',
-    'import/no-webpack-loader-syntax': 'error',
 
     'import/order': [
       'error',
@@ -306,7 +304,6 @@ module.exports = defineConfig({
         '*.config.js',
         '.*rc.js',
         'ide-helper.js',
-        'config/webpack/**/*',
         'config/formatjs-formatter.js',
       ],
 

.github/renovate.json5

@@ -21,23 +21,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',

app/javascript/entrypoints/public-path.ts

@@ -1,23 +0,0 @@
-// Dynamically set webpack's loading path depending on a meta header, in order
-// to share the same assets regardless of instance configuration.
-// See https://webpack.js.org/guides/public-path/#on-the-fly
-
-function removeOuterSlashes(string: string) {
-  return string.replace(/^\/*/, '').replace(/\/*$/, '');
-}
-
-function formatPublicPath(host = '', path = '') {
-  let formattedHost = removeOuterSlashes(host);
-  if (formattedHost && !/^http/i.test(formattedHost)) {
-    formattedHost = `//${formattedHost}`;
-  }
-  const formattedPath = removeOuterSlashes(path);
-  return `${formattedHost}/${formattedPath}/`;
-}
-
-const cdnHost = document.querySelector<HTMLMetaElement>('meta[name=cdn-host]');
-
-__webpack_public_path__ = formatPublicPath(
-  cdnHost ? cdnHost.content : '',
-  process.env.PUBLIC_OUTPUT_PATH,
-);

app/javascript/entrypoints/public.tsx

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

app/javascript/entrypoints/two_factor_authentication.ts

@@ -3,8 +3,6 @@ import axios, { AxiosError } from 'axios';
 
 import ready from '../mastodon/ready';
 
-import 'regenerator-runtime/runtime';
-
 type PublicKeyCredentialCreationOptionsJSON =
   WebAuthnJSON.CredentialCreationOptionsJSON['publicKey'];
 

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

@@ -1,203 +1,203 @@
 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');
+  return import('../../notifications');
 }
 
 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 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 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 ListEditor () {
-  return import(/* webpackChunkName: "features/list_editor" */'../../list_editor');
+  return import('../../list_editor');
 }
 
 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 Onboarding () {
-  return import(/* webpackChunkName: "features/onboarding" */'../../onboarding');
+  return import('../../onboarding');
 }
 
 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 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 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');
 }

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() {

babel.config.js

@@ -1,80 +0,0 @@
-module.exports = (api) => {
-  const env = api.env();
-
-  const reactOptions = {
-    development: false,
-    runtime: 'automatic',
-  };
-
-  const envOptions = {
-    useBuiltIns: "usage",
-    corejs: { version: "3.30" },
-    debug: false,
-    include: [
-      'transform-numeric-separator',
-      'transform-optional-chaining',
-      'transform-nullish-coalescing-operator',
-      'transform-class-properties',
-    ],
-  };
-
-  const plugins = [
-    ['formatjs'],
-    'preval',
-  ];
-
-  switch (env) {
-  case 'production':
-    plugins.push(...[
-      'lodash',
-      [
-        'transform-react-remove-prop-types',
-        {
-          mode: 'remove',
-          removeImport: true,
-          additionalLibraries: [
-            'react-immutable-proptypes',
-          ],
-        },
-      ],
-      '@babel/transform-react-inline-elements',
-      [
-        '@babel/transform-runtime',
-        {
-          helpers: true,
-          regenerator: false,
-          useESModules: true,
-        },
-      ],
-    ]);
-    break;
-
-  case 'development':
-    reactOptions.development = true;
-    envOptions.debug = true;
-
-    // We need Babel to not inject polyfills in dev, as this breaks `preval` files
-    envOptions.useBuiltIns = false;
-    envOptions.corejs = undefined;
-    break;
-  }
-
-  const config = {
-    presets: [
-      '@babel/preset-typescript',
-      ['@babel/react', reactOptions],
-      ['@babel/env', envOptions],
-    ],
-    plugins,
-    overrides: [
-      {
-        test: /tesseract\.js/,
-        presets: [
-          ['@babel/env', { ...envOptions, modules: 'commonjs' }],
-        ],
-      },
-    ],
-  };
-
-  return config;
-};

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

config/webpack/configuration.js

@@ -1,28 +0,0 @@
-// Common configuration for webpacker loaded from config/webpacker.yml
-
-const { readFileSync } = require('fs');
-const { resolve } = require('path');
-const { env } = require('process');
-
-const { load } = require('js-yaml');
-
-const configPath = resolve('config', 'webpacker.yml');
-const settings = load(readFileSync(configPath), 'utf8')[env.RAILS_ENV || env.NODE_ENV];
-
-const themePath = resolve('config', 'themes.yml');
-const themes = load(readFileSync(themePath), 'utf8');
-
-const output = {
-  path: resolve('public', settings.public_output_path),
-  publicPath: `/${settings.public_output_path}/`,
-};
-
-module.exports = {
-  settings,
-  themes,
-  env: {
-    NODE_ENV: env.NODE_ENV,
-    PUBLIC_OUTPUT_PATH: settings.public_output_path,
-  },
-  output,
-};

config/webpack/development.js

@@ -1,62 +0,0 @@
-// Note: You must restart bin/webpack-dev-server for changes to take effect
-
-const { merge } = require('webpack-merge');
-
-const { settings, output } = require('./configuration');
-const sharedConfig = require('./shared');
-
-const watchOptions = {};
-
-if (process.env.VAGRANT) {
-  // If we are in Vagrant, we can't rely on inotify to update us with changed
-  // files, so we must poll instead. Here, we poll every second to see if
-  // anything has changed.
-  watchOptions.poll = 1000;
-}
-
-module.exports = merge(sharedConfig, {
-  mode: 'development',
-  cache: true,
-  devtool: 'cheap-module-eval-source-map',
-
-  stats: {
-    errorDetails: true,
-  },
-
-  output: {
-    pathinfo: true,
-  },
-
-  devServer: {
-    clientLogLevel: 'none',
-    compress: settings.dev_server.compress,
-    quiet: settings.dev_server.quiet,
-    disableHostCheck: settings.dev_server.disable_host_check,
-    host: settings.dev_server.host,
-    port: settings.dev_server.port,
-    https: settings.dev_server.https,
-    hot: settings.dev_server.hmr,
-    contentBase: output.path,
-    inline: settings.dev_server.inline,
-    useLocalIp: settings.dev_server.use_local_ip,
-    public: settings.dev_server.public,
-    publicPath: output.publicPath,
-    historyApiFallback: {
-      disableDotRule: true,
-    },
-    headers: settings.dev_server.headers,
-    overlay: settings.dev_server.overlay,
-    stats: {
-      entrypoints: false,
-      errorDetails: false,
-      modules: false,
-      moduleTrace: false,
-    },
-    watchOptions: Object.assign(
-      {},
-      settings.dev_server.watch_options,
-      watchOptions,
-    ),
-    writeToDisk: filePath => /ocr/.test(filePath),
-  },
-});

config/webpack/production.js

@@ -1,74 +0,0 @@
-// Note: You must restart bin/webpack-dev-server for changes to take effect
-
-const { createHash } = require('crypto');
-const { readFileSync } = require('fs');
-const { resolve } = require('path');
-
-const CompressionPlugin = require('compression-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const { merge } = require('webpack-merge');
-const { InjectManifest } = require('workbox-webpack-plugin');
-
-const sharedConfig = require('./shared');
-
-const root = resolve(__dirname, '..', '..');
-
-module.exports = merge(sharedConfig, {
-  mode: 'production',
-  devtool: 'source-map',
-  stats: 'normal',
-  bail: true,
-  optimization: {
-    minimize: true,
-    minimizer: [
-      new TerserPlugin({
-        cache: true,
-        parallel: true,
-        sourceMap: true,
-      }),
-    ],
-  },
-
-  plugins: [
-    new CompressionPlugin({
-      filename: '[path][base].gz[query]',
-      cache: true,
-      test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/,
-    }),
-    new CompressionPlugin({
-      filename: '[path][base].br[query]',
-      algorithm: 'brotliCompress',
-      cache: true,
-      test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/,
-    }),
-    new BundleAnalyzerPlugin({ // generates report.html
-      analyzerMode: 'static',
-      openAnalyzer: false,
-      logLevel: 'silent', // do not bother Webpacker, who runs with --json and parses stdout
-    }),
-    new InjectManifest({
-      additionalManifestEntries: ['1f602.svg', 'sheet_13.png'].map((filename) => {
-        const path = resolve(root, 'public', 'emoji', filename);
-        const body = readFileSync(path);
-        const md5  = createHash('md5');
-
-        md5.update(body);
-
-        return {
-          revision: md5.digest('hex'),
-          url: `/emoji/${filename}`,
-        };
-      }),
-      exclude: [
-        /(?:base|extra)_polyfills-.*\.js$/,
-        /locale_.*\.js$/,
-        /mailer-.*\.(?:css|js)$/,
-      ],
-      include: [/\.js$/, /\.css$/],
-      maximumFileSizeToCacheInBytes: 2 * 1_024 * 1_024, // 2 MiB
-      swDest: resolve(root, 'public', 'packs', 'sw.js'),
-      swSrc: resolve(root, 'app', 'javascript', 'mastodon', 'service_worker', 'entry.js'),
-    }),
-  ],
-});

config/webpack/rules/babel.js

@@ -1,28 +0,0 @@
-const { join, resolve } = require('path');
-
-const { env, settings } = require('../configuration');
-
-module.exports = {
-  test: /\.(js|jsx|mjs|ts|tsx)$/,
-  include: [
-    settings.source_path,
-    ...settings.resolved_paths,
-    'node_modules/@reduxjs'
-  ].map(p => resolve(p)),
-  exclude: function(modulePath) {
-    return (
-      /node_modules/.test(modulePath) &&
-      !/@reduxjs/.test(modulePath)
-    );
-  },
-  use: [
-    {
-      loader: 'babel-loader',
-      options: {
-        cacheDirectory: join(settings.cache_path, 'babel-loader'),
-        cacheCompression: env.NODE_ENV === 'production',
-        compact: env.NODE_ENV === 'production',
-      },
-    },
-  ],
-};

config/webpack/rules/css.js

@@ -1,28 +0,0 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-module.exports = {
-  test: /\.s?css$/i,
-  use: [
-    MiniCssExtractPlugin.loader,
-    {
-      loader: 'css-loader',
-      options: {
-        sourceMap: true,
-        importLoaders: 2,
-      },
-    },
-    {
-      loader: 'postcss-loader',
-      options: {
-        sourceMap: true,
-      },
-    },
-    {
-      loader: 'sass-loader',
-      options: {
-        implementation: require('sass'),
-        sourceMap: true,
-      },
-    },
-  ],
-};

config/webpack/rules/file.js

@@ -1,22 +0,0 @@
-const { join } = require('path');
-
-const { settings } = require('../configuration');
-
-module.exports = {
-  test: new RegExp(`(${settings.static_assets_extensions.join('|')})$`, 'i'),
-  exclude: [/material-icons/, /svg-icons/],
-  use: [
-    {
-      loader: 'file-loader',
-      options: {
-        name(file) {
-          if (file.includes(settings.source_path)) {
-            return 'media/[path][name]-[hash].[ext]';
-          }
-          return 'media/[folder]/[name]-[hash:8].[ext]';
-        },
-        context: join(settings.source_path),
-      },
-    },
-  ],
-};

config/webpack/rules/index.js

@@ -1,16 +0,0 @@
-const babel = require('./babel');
-const css = require('./css');
-const file = require('./file');
-const materialIcons = require('./material_icons');
-const tesseract = require('./tesseract');
-
-// Webpack loaders are processed in reverse order
-// https://webpack.js.org/concepts/loaders/#loader-features
-// Lastly, process static files using file loader
-module.exports = {
-  materialIcons,
-  file,
-  tesseract,
-  css,
-  babel,
-};

config/webpack/rules/mark.js

@@ -1,8 +0,0 @@
-if (process.env.NODE_ENV === 'production') {
-  module.exports = {};
-} else {
-  module.exports = {
-    test: /\.js$/,
-    loader: 'mark-loader',
-  };
-}

config/webpack/rules/material_icons.js

@@ -1,14 +0,0 @@
-module.exports = {
-  test: /\.svg$/,
-  include: [/material-icons/, /svg-icons/],
-  issuer: /\.[jt]sx?$/,
-  use: [
-    {
-      loader: '@svgr/webpack',
-      options: {
-        svgo: false,
-        titleProp: true,
-      },
-    },
-  ],
-};

config/webpack/rules/tesseract.js

@@ -1,14 +0,0 @@
-module.exports = {
-  test: [
-    /tesseract\.js\/dist\/worker\.min\.js$/,
-    /tesseract\.js\/dist\/worker\.min\.js.map$/,
-    /tesseract\.js-core\/tesseract-core\.wasm$/,
-    /tesseract\.js-core\/tesseract-core\.wasm.js$/,
-  ],
-  use: {
-    loader: 'file-loader',
-    options: {
-      name: 'ocr/[name]-[hash].[ext]',
-    },
-  },
-};

config/webpack/shared.js

@@ -1,113 +0,0 @@
-// Note: You must restart bin/webpack-dev-server for changes to take effect
-
-const { basename, dirname, join, relative, resolve } = require('path');
-
-const CircularDependencyPlugin = require('circular-dependency-plugin');
-const { sync } = require('glob');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const extname = require('path-complete-extname');
-const webpack = require('webpack');
-const AssetsManifestPlugin = require('webpack-assets-manifest');
-
-const { env, settings, themes, output } = require('./configuration');
-const rules = require('./rules');
-
-const extensionGlob = `**/*{${settings.extensions.join(',')}}*`;
-const entryPath = join(settings.source_path, settings.source_entry_path);
-const packPaths = sync(join(entryPath, extensionGlob));
-
-module.exports = {
-  entry: Object.assign(
-    packPaths.reduce((map, entry) => {
-      const localMap = map;
-      const namespace = relative(join(entryPath), dirname(entry));
-      localMap[join(namespace, basename(entry, extname(entry)))] = resolve(entry);
-      return localMap;
-    }, {}),
-    Object.keys(themes).reduce((themePaths, name) => {
-      themePaths[name] = resolve(join(settings.source_path, themes[name]));
-      return themePaths;
-    }, {}),
-  ),
-
-  output: {
-    filename: 'js/[name]-[chunkhash].js',
-    chunkFilename: 'js/[name]-[chunkhash].chunk.js',
-    hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
-    hashFunction: 'sha256',
-    crossOriginLoading: 'anonymous',
-    path: output.path,
-    publicPath: output.publicPath,
-  },
-
-  optimization: {
-    runtimeChunk: {
-      name: 'common',
-    },
-    splitChunks: {
-      cacheGroups: {
-        default: false,
-        vendors: false,
-        common: {
-          name: 'common',
-          chunks: 'all',
-          minChunks: 2,
-          minSize: 0,
-          test: /^(?!.*[\\/]node_modules[\\/]react-intl[\\/]).+$/,
-        },
-      },
-    },
-    occurrenceOrder: true,
-  },
-
-  module: {
-    rules: Object.keys(rules).map(key => rules[key]),
-    strictExportPresence: true,
-  },
-
-  plugins: [
-    new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
-    new webpack.NormalModuleReplacementPlugin(
-      /^history\//, (resource) => {
-        // temporary fix for https://github.com/ReactTraining/react-router/issues/5576
-        // to reduce bundle size
-        resource.request = resource.request.replace(/^history/, 'history/es');
-      },
-    ),
-    new MiniCssExtractPlugin({
-      filename: 'css/[name]-[contenthash:8].css',
-      chunkFilename: 'css/[name]-[contenthash:8].chunk.css',
-    }),
-    new AssetsManifestPlugin({
-      integrity: true,
-      integrityHashes: ['sha256'],
-      entrypoints: true,
-      writeToDisk: true,
-      publicPath: true,
-    }),
-    new CircularDependencyPlugin({
-      failOnError: true,
-    })
-  ],
-
-  resolve: {
-    extensions: settings.extensions,
-    modules: [
-      resolve(settings.source_path),
-      'node_modules',
-    ],
-    alias: {
-      "@": resolve(settings.source_path),
-    }
-  },
-
-  resolveLoader: {
-    modules: ['node_modules'],
-  },
-
-  node: {
-    // Called by http-link-header in an API we never use, increases
-    // bundle size unnecessarily
-    Buffer: false,
-  },
-};

config/webpacker.yml

@@ -1,94 +0,0 @@
-# Note: You must restart bin/webpack-dev-server for changes to take effect
-
-default: &default
-  source_path: app/javascript
-  source_entry_path: entrypoints
-  public_root_path: public
-  public_output_path: packs
-  cache_path: tmp/cache/webpacker
-  check_yarn_integrity: false
-  webpack_compile_output: false
-
-  # Additional paths webpack should lookup modules
-  # ['app/assets', 'engine/foo/app/assets']
-  resolved_paths: []
-
-  # Reload manifest.json on all requests so we reload latest compiled packs
-  cache_manifest: false
-
-  # Extract and emit a css file
-  extract_css: true
-
-  static_assets_extensions:
-    - .jpg
-    - .jpeg
-    - .png
-    - .tiff
-    - .ico
-    - .svg
-    - .eot
-    - .otf
-    - .ttf
-    - .woff
-    - .woff2
-
-  extensions:
-    - .mjs
-    - .js
-    - .jsx
-    - .ts
-    - .tsx
-    - .sass
-    - .scss
-    - .css
-    - .module.sass
-    - .module.scss
-    - .module.css
-    - .png
-    - .svg
-    - .gif
-    - .jpeg
-    - .jpg
-
-development:
-  <<: *default
-
-  compile: true
-
-  # Reference: https://webpack.js.org/configuration/dev-server/
-  dev_server:
-    https: false
-    host: 0.0.0.0
-    port: 3035
-    public: localhost:3035
-    hmr: false
-    # Inline should be set to true if using HMR
-    inline: true
-    overlay: true
-    compress: true
-    disable_host_check: true
-    use_local_ip: false
-    quiet: false
-    headers:
-      'Access-Control-Allow-Origin': '*'
-    watch_options:
-      ignored: '**/node_modules/**'
-
-test:
-  <<: *default
-
-  # CI precompiles packs prior to running the tests.
-  # Also avoids race conditions in parallel_tests.
-  compile: false
-
-  # Compile test packs to a separate directory
-  public_output_path: packs-test
-
-production:
-  <<: *default
-
-  # Production depends on precompilation of packs prior to booting for performance.
-  compile: false
-
-  # Cache manifest.json for performance
-  cache_manifest: true

lib/tasks/webpacker.rake

@@ -1,34 +0,0 @@
-# frozen_string_literal: true
-
-# Disable this task as we use pnpm
-
-require 'semantic_range'
-
-Rake::Task['webpacker:check_yarn'].clear
-
-namespace :webpacker do
-  desc 'Verifies if Yarn is installed'
-  task check_yarn: :environment do
-    begin
-      yarn_version = `yarn --version`.strip
-      raise Errno::ENOENT if yarn_version.blank?
-
-      yarn_range = '>=4 <5'
-      is_valid = begin
-        SemanticRange.satisfies?(yarn_version, yarn_range)
-      rescue
-        false
-      end
-
-      unless is_valid
-        warn "Mastodon and Webpacker requires Yarn \"#{yarn_range}\" and you are using #{yarn_version}"
-        warn 'Exiting!'
-        exit!
-      end
-    rescue Errno::ENOENT
-      warn 'Yarn not installed. Please see the Mastodon documentation to install the correct version.'
-      warn 'Exiting!'
-      exit!
-    end
-  end
-end

lib/webpacker/helper_extensions.rb

@@ -1,27 +0,0 @@
-# frozen_string_literal: true
-
-module Webpacker::HelperExtensions
-  def javascript_pack_tag(name, **options)
-    src, integrity = current_webpacker_instance.manifest.lookup!(name, type: :javascript, with_integrity: true)
-    javascript_include_tag(src, options.merge(integrity: integrity))
-  end
-
-  def stylesheet_pack_tag(name, **options)
-    src, integrity = current_webpacker_instance.manifest.lookup!(name, type: :stylesheet, with_integrity: true)
-    stylesheet_link_tag(src, options.merge(integrity: integrity))
-  end
-
-  def preload_pack_asset(name, **options)
-    src, integrity = current_webpacker_instance.manifest.lookup!(name, with_integrity: true)
-
-    # This attribute will only work if the assets are on a different domain.
-    # And Webpack will (correctly) only add it in this case, so we need to conditionally set it here
-    # otherwise the preloaded request and the real request will have different crossorigin values
-    # and the preloaded file wont be loaded
-    crossorigin = 'anonymous' if Rails.configuration.action_controller.asset_host.present?
-
-    preload_link_tag(src, options.merge(integrity: integrity, crossorigin: crossorigin))
-  end
-end
-
-Webpacker::Helper.prepend(Webpacker::HelperExtensions)

lib/webpacker/manifest_extensions.rb

@@ -1,17 +0,0 @@
-# frozen_string_literal: true
-
-module Webpacker::ManifestExtensions
-  def lookup(name, pack_type = {})
-    asset = super
-
-    if pack_type[:with_integrity] && asset.respond_to?(:dig)
-      [asset['src'], asset['integrity']]
-    elsif asset.respond_to?(:dig)
-      asset['src']
-    else
-      asset
-    end
-  end
-end
-
-Webpacker::Manifest.prepend(Webpacker::ManifestExtensions)

package.json

@@ -10,8 +10,8 @@
     "streaming"
   ],
   "scripts": {
-    "build:development": "cross-env RAILS_ENV=development NODE_ENV=development ./bin/webpack",
-    "build:production": "cross-env RAILS_ENV=production NODE_ENV=production ./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/vite build",
     "fix:js": "eslint . --ext=.js,.jsx,.ts,.tsx --cache --report-unused-disable-directives --fix",
     "fix:css": "stylelint --fix \"**/*.{css,scss}\"",
     "fix": "yarn fix:js && yarn fix:css",
@@ -34,43 +34,29 @@
   },
   "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",
     "@formatjs/intl-pluralrules": "^5.2.2",
     "@gamestdio/websocket": "^0.3.2",
     "@github/webauthn-json": "^2.1.1",
+    "@optimize-lodash/rollup-plugin": "^4.0.4",
     "@rails/ujs": "7.1.3",
     "@reduxjs/toolkit": "^2.0.1",
-    "@svgr/webpack": "^5.5.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "arrow-key-navigation": "^1.2.0",
     "async-mutex": "^0.5.0",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.19",
     "axios": "^1.4.0",
-    "babel-loader": "^8.3.0",
     "babel-plugin-formatjs": "^10.5.1",
-    "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",
-    "circular-dependency-plugin": "^5.2.2",
     "classnames": "^2.3.2",
     "cocoon-js-vanilla": "^1.3.0",
     "color-blend": "^4.0.0",
-    "compression-webpack-plugin": "^6.1.2",
     "core-js": "^3.30.2",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.2.7",
-    "cssnano": "^7.0.0",
     "detect-passive-events": "^2.0.3",
     "emoji-mart": "npm:emoji-mart-lazyload@latest",
     "escape-html": "^1.0.3",
-    "file-loader": "^6.2.0",
     "font-awesome": "^4.7.0",
     "fuzzysort": "^2.0.4",
     "glob": "^10.2.6",
@@ -78,16 +64,11 @@
     "hoist-non-react-statics": "^3.3.2",
     "http-link-header": "^1.1.1",
     "immutable": "^4.3.0",
-    "imports-loader": "^1.2.0",
     "intl-messageformat": "^10.3.5",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
-    "mark-loader": "^0.1.6",
     "marky": "^1.2.5",
-    "mini-css-extract-plugin": "^1.6.2",
     "path-complete-extname": "^1.0.0",
-    "postcss": "^8.4.24",
-    "postcss-loader": "^4.3.0",
     "postcss-preset-env": "^9.5.2",
     "prop-types": "^15.8.1",
     "punycode": "^2.3.0",
@@ -112,36 +93,28 @@
     "react-textarea-autosize": "^8.4.1",
     "react-toggle": "^4.1.3",
     "redux-immutable": "^4.0.0",
-    "regenerator-runtime": "^0.14.0",
     "requestidlecallback": "^0.3.0",
     "sass": "^1.62.1",
-    "sass-loader": "^10.2.0",
     "stacktrace-js": "^2.0.2",
     "stringz": "^2.1.0",
     "substring-trie": "^1.0.2",
-    "terser-webpack-plugin": "^4.2.3",
     "tesseract.js": "^2.1.5",
     "tiny-queue": "^0.2.1",
     "twitter-text": "3.1.0",
     "vite": "^5.2.8",
-    "webpack": "^4.47.0",
-    "webpack-assets-manifest": "^4.0.6",
-    "webpack-bundle-analyzer": "^4.8.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-merge": "^5.9.0",
+    "vite-bundle-analyzer": "^0.9.4",
+    "vite-plugin-rails": "^0.5.0",
+    "vite-plugin-svgr": "^4.2.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": {
     "@formatjs/cli": "^6.1.1",
-    "@optimize-lodash/rollup-plugin": "^4.0.4",
     "@testing-library/react": "^15.0.0",
-    "@types/babel__core": "^7.20.1",
     "@types/emoji-mart": "^3.0.9",
     "@types/escape-html": "^1.0.2",
     "@types/hoist-non-react-statics": "^3.3.1",
@@ -166,11 +139,8 @@
     "@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",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
-    "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.41.0",
     "eslint-define-config": "^2.0.0",
     "eslint-import-resolver-typescript": "^3.5.5",
@@ -193,12 +163,10 @@
     "vite-plugin-rails": "^0.5.0",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^1.5.0",
-    "vitest-github-actions-reporter": "^0.11.1",
-    "webpack-dev-server": "^3.11.3"
+    "vitest-github-actions-reporter": "^0.11.1"
   },
   "resolutions": {
-    "kind-of": "^6.0.3",
-    "webpack/terser-webpack-plugin": "^4.2.3"
+    "kind-of": "^6.0.3"
   },
   "peerDependenciesMeta": {
     "react": {