Replace to shakapacker from webpacker

.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

.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:

.eslintrc.js

@@ -8,10 +8,6 @@ module.exports = {
     jest: true,
   },
 
-  globals: {
-    ATTACHMENT_HOST: false,
-  },
-
   parser: '@babel/eslint-parser',
 
   plugins: [

.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

.yarnclean

@@ -44,3 +44,4 @@ Gruntfile.js
 # for specific ignore
 !.svgo.yml
 !sass-lint/**/*.yml
+!shakapacker/**/*.yml

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'
 

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)

Procfile.dev

 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

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

app/javascript/packs/about.js → app/javascript/about.js

-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);
 }
 

app/javascript/packs/admin.js → app/javascript/admin.js

-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} />

app/javascript/packs/application.js → app/javascript/application.js

-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();
 
 loadPolyfills().then(() => {
-  require('../mastodon/main').default();
+  require('mastodon/main').default();
 }).catch(e => {
   console.error(e);
 });

app/javascript/packs/error.js → app/javascript/error.js

-import './public-path';
-import ready from '../mastodon/ready';
+import 'mastodon/public-path';
+import ready from 'mastodon/ready';
 
 ready(() => {
   const image = document.querySelector('img');

app/javascript/mailer.js

+require('./styles/mailer.scss');
+
+require.context('./icons');

app/javascript/mastodon/common.js

-import Rails from '@rails/ujs';
+import * as Rails from '@rails/ujs';
 
 export function start() {
   require('font-awesome/css/font-awesome.css');

app/javascript/mastodon/main.js

@@ -39,6 +39,7 @@ function main() {
           console.error(err);
         });
     }
+
     perf.stop('main()');
   });
 }

app/javascript/mastodon/service_worker/web_push_notifications.js

 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';

app/javascript/packs/mailer.js

-require('../styles/mailer.scss');
-
-require.context('../icons');

app/javascript/packs/public.js → app/javascript/public.js

-import './public-path';
-import escapeTextContentForBrowser from 'escape-html';
-import loadPolyfills from '../mastodon/load_polyfills';
-import ready from '../mastodon/ready';
-import { start } from '../mastodon/common';
-import loadKeyboardExtensions from '../mastodon/load_keyboard_extensions';
+import 'mastodon/public-path';
 import 'cocoon-js-vanilla';
+import escapeTextContentForBrowser from 'escape-html';
+import loadPolyfills from 'mastodon/load_polyfills';
+import ready from 'mastodon/ready';
+import { start } from 'mastodon/common';
+import loadKeyboardExtensions from 'mastodon/load_keyboard_extensions';
 
 start();
 
@@ -26,10 +26,10 @@ window.addEventListener('message', e => {
 
 function main() {
   const IntlMessageFormat = require('intl-messageformat').default;
-  const { timeAgoString } = require('../mastodon/components/relative_timestamp');
+  const { timeAgoString } = require('mastodon/components/relative_timestamp');
   const { delegate } = require('@rails/ujs');
-  const emojify = require('../mastodon/features/emoji/emoji').default;
-  const { getLocale } = require('../mastodon/locales');
+  const emojify = require('mastodon/features/emoji/emoji').default;
+  const { getLocale } = require('mastodon/locales');
   const { messages } = getLocale();
   const React = require('react');
   const ReactDOM = require('react-dom');
@@ -90,7 +90,7 @@ function main() {
     const reactComponents = document.querySelectorAll('[data-component]');
 
     if (reactComponents.length > 0) {
-      import(/* webpackChunkName: "containers/media_container" */ '../mastodon/containers/media_container')
+      import(/* webpackChunkName: "containers/media_container" */ 'mastodon/containers/media_container')
         .then(({ default: MediaContainer }) => {
           [].forEach.call(reactComponents, (component) => {
             [].forEach.call(component.children, (child) => {