Update from webpacker v5 to shakapacker v6.0.0.rc13

Using a two-step process is recommended:
332e25186a/docs/v6_upgrade.md

app/javascript/application.js

@@ -43,7 +43,7 @@ import 'jquery-ui/themes/base/sortable.css'
 
 // I18n locales
 import { I18n } from "i18n-js";
-import locales from "../../../tmp/locales.json";
+import locales from "../../tmp/locales.json";
 
 // Fetch user locale from html#lang.
 // This value is being set on `app/views/layouts/application.html.erb` and

app/javascript/d3-tip.js

@@ -0,0 +1,5 @@
+/* eslint no-console:0 */
+
+// JS
+import * as d3Tip from 'd3-tip'
+window.d3.tip = d3Tip;

app/javascript/highlight.js

@@ -0,0 +1,8 @@
+/* eslint no-console:0 */
+
+// JS
+import * as hljs from 'highlight.js'
+window.hljs = hljs;
+
+// CSS
+import 'highlight.js/styles/base16/tomorrow.css'

app/javascript/packs/d3-tip.js

@@ -1,12 +0,0 @@
-/* eslint no-console:0 */
-// This file is automatically compiled by Webpack, along with any other files
-// present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/javascript and only use these pack files to reference
-// that code so it'll be compiled.
-//
-// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
-// layout file, like app/views/layouts/application.html.slim
-
-// JS
-import d3Tip from 'd3-tip'
-window.d3.tip = d3Tip;

app/javascript/packs/highlight.js

@@ -1,15 +0,0 @@
-/* eslint no-console:0 */
-// This file is automatically compiled by Webpack, along with any other files
-// present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/javascript and only use these pack files to reference
-// that code so it'll be compiled.
-//
-// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
-// layout file, like app/views/layouts/application.html.slim
-
-// JS
-import hljs from 'highlight.js'
-window.hljs = hljs;
-
-// CSS
-import 'highlight.js/styles/base16/tomorrow.css'

app/javascript/packs/sortable.js

@@ -1,12 +0,0 @@
-/* eslint no-console:0 */
-// This file is automatically compiled by Webpack, along with any other files
-// present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/javascript and only use these pack files to reference
-// that code so it'll be compiled.
-//
-// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
-// layout file, like app/views/layouts/application.html.slim
-
-// JS
-import Sortable from 'sortablejs'
-window.Sortable = Sortable;

app/javascript/packs/stylesheets.scss

@@ -1,34 +0,0 @@
-/* eslint no-console:0 */
-// This file is automatically compiled by Webpack, along with any other files
-// present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/javascript and only use these pack files to reference
-// that code so it'll be compiled.
-//
-// To reference this file, add <%= stylesheet_pack_tag 'stylesheets' %> to the appropriate
-// layout file, like app/views/layouts/application.html.slim
-
-$web-font-path: '';
-@import '~bootswatch/dist/yeti/variables';
-@import '~bootstrap/scss/bootstrap';
-@import '~bootswatch/dist/yeti/bootswatch';
-$fa-font-path: '~@fortawesome/fontawesome-free/webfonts/';
-// Remove lines below and re-include overall fontawesome in v6.2+
-// See https://github.com/FortAwesome/Font-Awesome/issues/19237
-@import '~@fortawesome/fontawesome-free/scss/functions';
-@import '~@fortawesome/fontawesome-free/scss/variables';
-@import '~@fortawesome/fontawesome-free/scss/mixins';
-@import '~@fortawesome/fontawesome-free/scss/core';
-@import '~@fortawesome/fontawesome-free/scss/sizing';
-@import '~@fortawesome/fontawesome-free/scss/fixed-width';
-@import '~@fortawesome/fontawesome-free/scss/bordered-pulled';
-@import '~@fortawesome/fontawesome-free/scss/animated';
-@import '~@fortawesome/fontawesome-free/scss/rotated-flipped';
-@import '~@fortawesome/fontawesome-free/scss/stacked';
-@import '~@fortawesome/fontawesome-free/scss/icons';
-@import '~@fortawesome/fontawesome-free/scss/screen-reader';
-// @import '~@fortawesome/fontawesome-free/scss/fontawesome';
-@import '~@fortawesome/fontawesome-free/scss/solid';
-@import '~@fortawesome/fontawesome-free/scss/regular';
-@import '~@fortawesome/fontawesome-free/scss/v4-shims';
-$opensans-path: '~opensans-webkit/fonts/';
-@import '~opensans-webkit/src/sass/open-sans';

app/javascript/packs/vis.js

@@ -1,15 +0,0 @@
-/* eslint no-console:0 */
-// This file is automatically compiled by Webpack, along with any other files
-// present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/javascript and only use these pack files to reference
-// that code so it'll be compiled.
-//
-// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
-// layout file, like app/views/layouts/application.html.slim
-
-// JS
-import 'vis'
-window.vis = vis;
-
-// CSS
-import 'vis/dist/vis.min.css'

app/javascript/sortable.js

@@ -0,0 +1,5 @@
+/* eslint no-console:0 */
+
+// JS
+import Sortable from 'sortablejs'
+window.Sortable = Sortable;

app/javascript/stylesheets.scss

@@ -0,0 +1,34 @@
+/* eslint no-console:0 */
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so it'll be compiled.
+//
+// To reference this file, add <%= stylesheet_pack_tag 'stylesheets' %> to the appropriate
+// layout file, like app/views/layouts/application.html.slim
+
+$web-font-path: '//';
+@import '../../node_modules/bootswatch/dist/yeti/variables';
+@import '../../node_modules/bootstrap/scss/bootstrap';
+@import '../../node_modules/bootswatch/dist/yeti/bootswatch';
+$fa-font-path: '~@fortawesome/fontawesome-free/webfonts/';
+// Remove lines below and re-include overall fontawesome in v6.2+
+// See https://github.com/FortAwesome/Font-Awesome/issues/19237
+@import '../../node_modules/@fortawesome/fontawesome-free/scss/functions';
+@import '../../node_modules/@fortawesome/fontawesome-free/scss/variables';
+@import '../../node_modules/@fortawesome/fontawesome-free/scss/mixins';
+@import '../../node_modules/@fortawesome/fontawesome-free/scss/core';
+@import '../../node_modules/@fortawesome/fontawesome-free/scss/sizing';
+@import '../../node_modules/@fortawesome/fontawesome-free/scss/fixed-width';
+@import '../../node_modules/@fortawesome/fontawesome-free/scss/bordered-pulled';
+@import '../../node_modules/@fortawesome/fontawesome-free/scss/animated';
+@import '../../node_modules/@fortawesome/fontawesome-free/scss/rotated-flipped';
+@import '../../node_modules/@fortawesome/fontawesome-free/scss/stacked';
+@import '../../node_modules/@fortawesome/fontawesome-free/scss/icons';
+@import '../../node_modules/@fortawesome/fontawesome-free/scss/screen-reader';
+// @import '~@fortawesome/fontawesome-free/scss/fontawesome';
+@import '../../node_modules/@fortawesome/fontawesome-free/scss/solid';
+@import '../../node_modules/@fortawesome/fontawesome-free/scss/regular';
+@import '../../node_modules/@fortawesome/fontawesome-free/scss/v4-shims';
+$opensans-path: '~opensans-webkit/fonts/';
+@import '../../node_modules/opensans-webkit/src/sass/open-sans';

app/javascript/vis.js

@@ -0,0 +1,8 @@
+/* eslint no-console:0 */
+
+// JS
+import 'vis'
+window.vis = vis;
+
+// CSS
+import 'vis/dist/vis.min.css'

app/views/admin/dashboard/show.html.slim

@@ -2,8 +2,8 @@
   // Force a full page reload, see https://github.com/turbolinks/turbolinks/issues/326.
      Otherwise, the global variable `vis` might be uninitialized in the assets (race condition)
   meta name='turbolinks-visit-control' content='reload'
-  = javascript_pack_tag('vis', 'data-turbolinks-track': true)
-  = stylesheet_pack_tag('vis', media: 'all', 'data-turbolinks-track': true)
+  - append_javascript_pack_tag('vis')
+  - append_stylesheet_pack_tag('vis')
 
 h1 = t('breadcrumbs.dashboard.show')
 

app/views/exercises/_form.html.slim

@@ -2,7 +2,7 @@
   // Force a full page reload, see https://github.com/turbolinks/turbolinks/issues/326.
      Otherwise, code might not be highlighted correctly (race condition)
   meta name='turbolinks-visit-control' content='reload'
-  = javascript_pack_tag('sortable', 'data-turbolinks-track': true)
+  - append_javascript_pack_tag('sortable')
 
 - execution_environments = ExecutionEnvironment.where('file_type_id IS NOT NULL').select(:file_type_id, :id)
 - file_types = FileType.where('file_extension IS NOT NULL').select(:file_extension, :id)

app/views/exercises/_tips_content.html.slim

@@ -2,8 +2,8 @@
   // Force a full page reload, see https://github.com/turbolinks/turbolinks/issues/326.
      Otherwise, code might not be highlighted correctly (race condition)
   meta name='turbolinks-visit-control' content='reload'
-  = javascript_pack_tag('highlight', 'data-turbolinks-track': true)
-  = stylesheet_pack_tag('highlight', media: 'all', 'data-turbolinks-track': true)
+  - append_javascript_pack_tag('highlight')
+  - append_stylesheet_pack_tag('highlight')
 
 #tips.card.mt-2 role="tab" style="display: block;"
   .card-header.py-2

app/views/exercises/show.html.slim

@@ -2,8 +2,8 @@
   // Force a full page reload, see https://github.com/turbolinks/turbolinks/issues/326.
      Otherwise, code might not be highlighted correctly (race condition)
   meta name='turbolinks-visit-control' content='reload'
-  = javascript_pack_tag('highlight', 'data-turbolinks-track': true)
-  = stylesheet_pack_tag('highlight', media: 'all', 'data-turbolinks-track': true)
+  - append_javascript_pack_tag('highlight')
+  - append_stylesheet_pack_tag('highlight')
 
 h1.d-inline-block = @exercise
 .btn-group.float-right

app/views/exercises/statistics.html.slim

@@ -2,7 +2,7 @@
   // Force a full page reload, see https://github.com/turbolinks/turbolinks/issues/326.
      Otherwise, code might not be highlighted correctly (race condition)
   meta name='turbolinks-visit-control' content='reload'
-  = javascript_pack_tag('d3-tip', 'data-turbolinks-track': true)
+  - append_javascript_pack_tag('d3-tip')
 h1 = @exercise
 
 = row(label: '.participants', value: @exercise.users.distinct.count)

app/views/exercises/study_group_dashboard.html.slim

@@ -2,7 +2,7 @@
   // Force a full page reload, see https://github.com/turbolinks/turbolinks/issues/326.
      Otherwise, code might not be highlighted correctly (race condition)
   meta name='turbolinks-visit-control' content='reload'
-  = javascript_pack_tag('d3-tip', 'data-turbolinks-track': true)
+  - append_javascript_pack_tag('d3-tip')
 
 h1
   = t('.live_dashboard')

app/views/layouts/application.html.slim

@@ -9,10 +9,9 @@ html lang="#{I18n.locale || I18n.default_locale}"
     = favicon_link_tag('/favicon.png', type: 'image/png')
     = favicon_link_tag('/favicon.png', rel: 'apple-touch-icon', type: 'image/png')
     = action_cable_meta_tag
-    = stylesheet_pack_tag('application', media: 'all', 'data-turbolinks-track': true)
-    = stylesheet_pack_tag('stylesheets', media: 'all', 'data-turbolinks-track': true)
+    = stylesheet_pack_tag('application', 'stylesheets', media: 'all', 'data-turbolinks-track': true)
     = stylesheet_link_tag('application', media: 'all', 'data-turbolinks-track': true)
-    = javascript_pack_tag('application', 'data-turbolinks-track': true)
+    = javascript_pack_tag('application', 'data-turbolinks-track': true, defer: false)
     = javascript_include_tag('application', 'data-turbolinks-track': true)
     = yield(:head)
     = csrf_meta_tags

app/views/statistics/activity_history.html.slim

@@ -2,8 +2,8 @@
   // Force a full page reload, see https://github.com/turbolinks/turbolinks/issues/326.
      Otherwise, the global variable `vis` might be uninitialized in the assets (race condition)
   meta name='turbolinks-visit-control' content='reload'
-  = javascript_pack_tag('vis', 'data-turbolinks-track': true)
-  = stylesheet_pack_tag('vis', media: 'all', 'data-turbolinks-track': true)
+  - append_javascript_pack_tag('vis')
+  - append_stylesheet_pack_tag('vis')
 
 .group
   .title

app/views/statistics/graphs.html.slim

@@ -2,8 +2,8 @@
   // Force a full page reload, see https://github.com/turbolinks/turbolinks/issues/326.
      Otherwise, the global variable `vis` might be uninitialized in the assets (race condition)
   meta name='turbolinks-visit-control' content='reload'
-  = javascript_pack_tag('vis', 'data-turbolinks-track': true)
-  = stylesheet_pack_tag('vis', media: 'all', 'data-turbolinks-track': true)
+  - append_javascript_pack_tag('vis')
+  - append_stylesheet_pack_tag('vis')
 
 .group
   .title

app/views/submissions/show.html.slim

@@ -2,8 +2,8 @@
   // Force a full page reload, see https://github.com/turbolinks/turbolinks/issues/326.
      Otherwise, code might not be highlighted correctly (race condition)
   meta name='turbolinks-visit-control' content='reload'
-  = javascript_pack_tag('highlight', 'data-turbolinks-track': true)
-  = stylesheet_pack_tag('highlight', media: 'all', 'data-turbolinks-track': true)
+  - append_javascript_pack_tag('highlight')
+  - append_stylesheet_pack_tag('highlight')
 
 h1 = @submission
 

app/views/tips/show.html.slim

@@ -2,8 +2,8 @@
   // Force a full page reload, see https://github.com/turbolinks/turbolinks/issues/326.
      Otherwise, code might not be highlighted correctly (race condition)
   meta name='turbolinks-visit-control' content='reload'
-  = javascript_pack_tag('highlight', 'data-turbolinks-track': true)
-  = stylesheet_pack_tag('highlight', media: 'all', 'data-turbolinks-track': true)
+  - append_javascript_pack_tag('highlight')
+  - append_stylesheet_pack_tag('highlight')
 
 h1
   = @tip.to_s