Replace to shakapacker from webpackerdeps/shakapacker

80 files changed, 1747 insertions, 3966 deletions

diff --git a/.browserslistrc b/.browserslistrc
index 54dd3aaf348..d5734664cce 100644
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -4,4 +4,6 @@ not IE 11
 not dead
 
 [development]
-supports es6-module
+last 1 chrome version
+last 1 firefox version
+last 1 safari version
diff --git a/.circleci/config.yml b/.circleci/config.yml
index 2a60ae68413..ad36c3fdf37 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -65,7 +65,7 @@ jobs:
       - install-ruby-dependencies:
           ruby-version: '3.0'
       - node/install-packages:
-          cache-version: v1
+          cache-version: v2
           pkg-manager: yarn
       - run:
           command: ./bin/rails assets:precompile
@@ -214,7 +214,7 @@ workflows:
           requires:
             - build
       - node/run:
-          cache-version: v1
+          cache-version: v2
           name: test-webui
           pkg-manager: yarn
           requires:
diff --git a/.eslintrc.js b/.eslintrc.js
index e4ada6fe0d1..7079572d645 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,10 +8,6 @@ module.exports = {
     jest: true,
   },
 
-  globals: {
-    ATTACHMENT_HOST: false,
-  },
-
   parser: '@babel/eslint-parser',
 
   plugins: [
diff --git a/.gitignore b/.gitignore
index 25c8388e16a..e75e506209e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -59,7 +59,8 @@ npm-debug.log
 
 # Ignore yarn log files
 yarn-error.log
-yarn-debug.log
+yarn-debug.log*
+.yarn-integrity
 
 # Ignore vagrant log files
 *-cloudimg-console.log
diff --git a/.yarnclean b/.yarnclean
index 0cc2b50d7be..de4acd2104b 100644
--- a/.yarnclean
+++ b/.yarnclean
@@ -44,3 +44,4 @@ Gruntfile.js
 # for specific ignore
 !.svgo.yml
 !sass-lint/**/*.yml
+!shakapacker/**/*.yml
diff --git a/Gemfile b/Gemfile
index d90c17f14fa..25a776d11e4 100644
--- a/Gemfile
+++ b/Gemfile
@@ -84,13 +84,13 @@ gem 'sidekiq-unique-jobs', '~> 7.1'
 gem 'sidekiq-bulk', '~> 0.2.0'
 gem 'simple-navigation', '~> 4.4'
 gem 'simple_form', '~> 5.1'
+gem 'shakapacker', '~> 6.5'
 gem 'sprockets-rails', '~> 3.4', require: 'sprockets/railtie'
 gem 'stoplight', '~> 3.0.0'
 gem 'strong_migrations', '~> 0.7'
 gem 'tty-prompt', '~> 0.23', require: false
 gem 'twitter-text', '~> 3.1.0'
 gem 'tzinfo-data', '~> 1.2022'
-gem 'webpacker', '~> 5.4'
 gem 'webpush', git: 'https://github.com/ClearlyClaire/webpush.git', ref: 'f14a4d52e201128b1b00245d11b6de80d6cfdcd9'
 gem 'webauthn', '~> 2.5'
 
diff --git a/Gemfile.lock b/Gemfile.lock
index 8b8a15623d2..08152e230fa 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -496,7 +496,7 @@ GEM
       httpclient
       json-jwt (>= 1.11.0)
       rack (>= 2.1.0)
-    rack-proxy (0.7.0)
+    rack-proxy (0.7.2)
       rack
     rack-test (2.0.2)
       rack (>= 1.3)
@@ -610,6 +610,11 @@ GEM
       activerecord (>= 4.0.0)
       railties (>= 4.0.0)
     semantic_range (3.0.0)
+    shakapacker (6.5.2)
+      activesupport (>= 5.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 5.2)
+      semantic_range (>= 2.3.0)
     sidekiq (6.5.6)
       connection_pool (>= 2.2.5)
       rack (~> 2.0)
@@ -714,11 +719,6 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (5.4.3)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -833,6 +833,7 @@ DEPENDENCIES
   ruby-progressbar (~> 1.11)
   sanitize (~> 6.0)
   scenic (~> 1.6)
+  shakapacker (~> 6.5)
   sidekiq (~> 6.5)
   sidekiq-bulk (~> 0.2.0)
   sidekiq-scheduler (~> 4.0)
@@ -851,6 +852,5 @@ DEPENDENCIES
   tzinfo-data (~> 1.2022)
   webauthn (~> 2.5)
   webmock (~> 3.18)
-  webpacker (~> 5.4)
   webpush!
   xorcist (~> 1.1)
diff --git a/Procfile.dev b/Procfile.dev
index ba04fb661b3..417aaa5bc87 100644
--- a/Procfile.dev
+++ b/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 run start
-webpack: ./bin/webpack-dev-server --listen-host 0.0.0.0
+webpack: env WEBPACKER_DEV_SERVER_HOST=0.0.0.0 ./bin/webpacker-dev-server
diff --git a/app/helpers/mascot_helper.rb b/app/helpers/mascot_helper.rb
index 0124c74f19b..9b35cbacc58 100644
--- a/app/helpers/mascot_helper.rb
+++ b/app/helpers/mascot_helper.rb
@@ -2,7 +2,7 @@
 
 module MascotHelper
   def mascot_url
-    full_asset_url(instance_presenter.mascot&.file&.url || asset_pack_path('media/images/elephant_ui_plane.svg'))
+    full_asset_url(instance_presenter.mascot&.file&.url || asset_pack_path('static/elephant_ui_plane.svg'))
   end
 
   private
diff --git a/app/javascript/packs/about.js b/app/javascript/about.js
index 892d825ece2..c0bc139ea21 100644
--- a/app/javascript/packs/about.js
+++ b/app/javascript/about.js
@@ -1,11 +1,11 @@
-import './public-path';
-import loadPolyfills from '../mastodon/load_polyfills';
-import { start } from '../mastodon/common';
+import 'mastodon/public-path';
+import loadPolyfills from 'mastodon/load_polyfills';
+import { start } from 'mastodon/common';
 
 start();
 
 function loaded() {
-  const TimelineContainer = require('../mastodon/containers/timeline_container').default;
+  const TimelineContainer = require('mastodon/containers/timeline_container').default;
   const React             = require('react');
   const ReactDOM          = require('react-dom');
   const mountNode         = document.getElementById('mastodon-timeline');
@@ -17,7 +17,7 @@ function loaded() {
 }
 
 function main() {
-  const ready = require('../mastodon/ready').default;
+  const ready = require('mastodon/ready').default;
   ready(loaded);
 }
 
diff --git a/app/javascript/packs/admin.js b/app/javascript/admin.js
index b733d6b1865..d6002cae678 100644
--- a/app/javascript/packs/admin.js
+++ b/app/javascript/admin.js
@@ -1,6 +1,6 @@
-import './public-path';
+import 'mastodon/public-path';
 import { delegate } from '@rails/ujs';
-import ready from '../mastodon/ready';
+import ready from 'mastodon/ready';
 
 const batchCheckboxClassName = '.batch-checkbox input[type="checkbox"]';
 
@@ -170,8 +170,8 @@ ready(() => {
     const componentName  = element.getAttribute('data-admin-component');
     const { locale, ...componentProps } = JSON.parse(element.getAttribute('data-props'));
 
-    import('../mastodon/containers/admin_component').then(({ default: AdminComponent }) => {
-      return import('../mastodon/components/admin/' + componentName).then(({ default: Component }) => {
+    import('mastodon/containers/admin_component').then(({ default: AdminComponent }) => {
+      return import('mastodon/components/admin/' + componentName).then(({ default: Component }) => {
         ReactDOM.render((
           <AdminComponent locale={locale}>
             <Component {...componentProps} />
diff --git a/app/javascript/application.js b/app/javascript/application.js
new file mode 100644
index 00000000000..523942d78eb
--- /dev/null
+++ b/app/javascript/application.js
@@ -0,0 +1,11 @@
+import 'mastodon/public-path';
+import loadPolyfills from 'mastodon/load_polyfills';
+import { start } from 'mastodon/common';
+
+start();
+
+loadPolyfills().then(() => {
+  require('mastodon/main').default();
+}).catch(e => {
+  console.error(e);
+});
diff --git a/app/javascript/packs/error.js b/app/javascript/error.js
index 6376dc2f5df..ae98cf6fe86 100644
--- a/app/javascript/packs/error.js
+++ b/app/javascript/error.js
@@ -1,5 +1,5 @@
-import './public-path';
-import ready from '../mastodon/ready';
+import 'mastodon/public-path';
+import ready from 'mastodon/ready';
 
 ready(() => {
   const image = document.querySelector('img');
diff --git a/app/javascript/mailer.js b/app/javascript/mailer.js
new file mode 100644
index 00000000000..96993acc186
--- /dev/null
+++ b/app/javascript/mailer.js
@@ -0,0 +1,3 @@
+require('./styles/mailer.scss');
+
+require.context('./icons');
diff --git a/app/javascript/mastodon/common.js b/app/javascript/mastodon/common.js
index 6818aa5d540..d3ffe6c22a7 100644
--- a/app/javascript/mastodon/common.js
+++ b/app/javascript/mastodon/common.js
@@ -1,4 +1,4 @@
-import Rails from '@rails/ujs';
+import * as Rails from '@rails/ujs';
 
 export function start() {
   require('font-awesome/css/font-awesome.css');
diff --git a/app/javascript/mastodon/main.js b/app/javascript/mastodon/main.js
index a66975bfd6a..640a3576c98 100644
--- a/app/javascript/mastodon/main.js
+++ b/app/javascript/mastodon/main.js
@@ -39,6 +39,7 @@ function main() {
           console.error(err);
         });
     }
+
     perf.stop('main()');
   });
 }
diff --git a/app/javascript/packs/public-path.js b/app/javascript/mastodon/public-path.js
index f96109f4fcd..f96109f4fcd 100644
--- a/app/javascript/packs/public-path.js
+++ b/app/javascript/mastodon/public-path.js
diff --git a/app/javascript/mastodon/service_worker/web_push_notifications.js b/app/javascript/mastodon/service_worker/web_push_notifications.js
index 9b75e9b9dc7..7f1d93dd9b1 100644
--- a/app/javascript/mastodon/service_worker/web_push_notifications.js
+++ b/app/javascript/mastodon/service_worker/web_push_notifications.js
@@ -1,6 +1,6 @@
 import IntlMessageFormat from 'intl-messageformat';
-import locales from './web_push_locales';
 import { unescape } from 'lodash';
+import locales from './web_push_locales';
 
 const MAX_NOTIFICATIONS = 5;
 const GROUP_TAG = 'tag';
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
deleted file mode 100644
index 91240aecfb8..00000000000
--- a/app/javascript/packs/application.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import './public-path';
-import loadPolyfills from '../mastodon/load_polyfills';
-import { start } from '../mastodon/common';
-
-start();
-
-loadPolyfills().then(() => {
-  require('../mastodon/main').default();
-}).catch(e => {
-  console.error(e);
-});
diff --git a/app/javascript/packs/mailer.js b/app/javascript/packs/mailer.js
deleted file mode 100644
index a4b6d544645..00000000000
--- a/