Update from webpacker v5 to shakapacker v6.0.0.rc13

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

.browserslistrc

@@ -1 +0,0 @@
-defaults

Gemfile

@@ -42,12 +42,12 @@ gem 'rest-client'
 gem 'rubytree'
 gem 'rubyzip'
 gem 'sass-rails'
+gem 'shakapacker', '6.0.0.rc13'
 gem 'slim-rails'
 gem 'sorcery' # Causes a deprecation warning in Rails 6.0+, see: https://github.com/Sorcery/sorcery/pull/255
 gem 'telegraf'
 gem 'tubesock'
 gem 'turbolinks'
-gem 'webpacker'
 gem 'whenever', require: false
 
 # Error Tracing

Gemfile.lock

@@ -464,6 +464,11 @@ GEM
     sentry-ruby (5.4.1)
       concurrent-ruby (~> 1.0, >= 1.0.2)
     set (1.0.2)
+    shakapacker (6.0.0.rc.13)
+      activesupport (>= 5.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 5.2)
+      semantic_range (>= 2.3.0)
     shoulda-matchers (5.1.0)
       activesupport (>= 5.2.0)
     simplecov (0.21.2)
@@ -524,11 +529,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)
     webrick (1.7.0)
     websocket (1.2.9)
     websocket-driver (0.7.5)
@@ -611,6 +611,7 @@ DEPENDENCIES
   selenium-webdriver
   sentry-rails
   sentry-ruby
+  shakapacker (= 6.0.0.rc13)
   shoulda-matchers
   simplecov
   slim-rails
@@ -621,7 +622,6 @@ DEPENDENCIES
   turbolinks
   web-console
   webmock
-  webpacker
   whenever
 
 BUNDLED WITH

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)
+  - append_javascript_pack_tag('vis')
-  = stylesheet_pack_tag('vis', media: 'all', 'data-turbolinks-track': true)
+  - 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)
+  - append_javascript_pack_tag('highlight')
-  = stylesheet_pack_tag('highlight', media: 'all', 'data-turbolinks-track': true)
+  - 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)
+  - append_javascript_pack_tag('highlight')
-  = stylesheet_pack_tag('highlight', media: 'all', 'data-turbolinks-track': true)
+  - 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('application', 'stylesheets', media: 'all', 'data-turbolinks-track': true)
-    = stylesheet_pack_tag('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)
+  - append_javascript_pack_tag('vis')
-  = stylesheet_pack_tag('vis', media: 'all', 'data-turbolinks-track': true)
+  - 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)
+  - append_javascript_pack_tag('vis')
-  = stylesheet_pack_tag('vis', media: 'all', 'data-turbolinks-track': true)
+  - 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)
+  - append_javascript_pack_tag('highlight')
-  = stylesheet_pack_tag('highlight', media: 'all', 'data-turbolinks-track': true)
+  - 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)
+  - append_javascript_pack_tag('highlight')
-  = stylesheet_pack_tag('highlight', media: 'all', 'data-turbolinks-track': true)
+  - append_stylesheet_pack_tag('highlight')
 
 h1
   = @tip.to_s

babel.config.js

@@ -1,83 +0,0 @@
-module.exports = function(api) {
-  var validEnv = ['development', 'test', 'production']
-  var currentEnv = api.env()
-  var isDevelopmentEnv = api.env('development')
-  var isProductionEnv = api.env('production')
-  var isTestEnv = api.env('test')
-
-  if (!validEnv.includes(currentEnv)) {
-    throw new Error(
-      'Please specify a valid `NODE_ENV` or ' +
-        '`BABEL_ENV` environment variables. Valid values are "development", ' +
-        '"test", and "production". Instead, received: ' +
-        JSON.stringify(currentEnv) +
-        '.'
-    )
-  }
-
-  return {
-    presets: [
-      isTestEnv && [
-        '@babel/preset-env',
-        {
-          targets: {
-            node: 'current'
-          }
-        }
-      ],
-      (isProductionEnv || isDevelopmentEnv) && [
-        '@babel/preset-env',
-        {
-          forceAllTransforms: true,
-          useBuiltIns: 'entry',
-          corejs: 3,
-          modules: false,
-          exclude: ['transform-typeof-symbol']
-        }
-      ]
-    ].filter(Boolean),
-    plugins: [
-      '@babel/plugin-transform-for-of',
-      'babel-plugin-macros',
-      '@babel/plugin-syntax-dynamic-import',
-      isTestEnv && 'babel-plugin-dynamic-import-node',
-      '@babel/plugin-transform-destructuring',
-      [
-        '@babel/plugin-proposal-class-properties',
-        {
-          loose: true
-        }
-      ],
-      [
-        '@babel/plugin-proposal-private-methods',
-        {
-          loose: true
-        }
-      ],
-      [
-        '@babel/plugin-proposal-private-property-in-object',
-        {
-          loose: true
-        }
-      ],
-      [
-        '@babel/plugin-proposal-object-rest-spread',
-        {
-          useBuiltIns: true
-        }
-      ],
-      [
-        '@babel/plugin-transform-runtime',
-        {
-          helpers: false
-        }
-      ],
-      [
-        '@babel/plugin-transform-regenerator',
-        {
-          async: false
-        }
-      ]
-    ].filter(Boolean)
-  }
-}

bin/webpacker

@@ -1,17 +1,14 @@
 #!/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 "bundler/setup"
-
 require "webpacker"
 require "webpacker/webpack_runner"
 
+ENV["RAILS_ENV"] ||= "development"
+ENV["NODE_ENV"]  ||= ENV["RAILS_ENV"]
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", Pathname.new(__FILE__).realpath)
+
 APP_ROOT = File.expand_path("..", __dir__)
 Dir.chdir(APP_ROOT) do
   Webpacker::WebpackRunner.run(ARGV)

bin/webpacker-dev-server

@@ -1,7 +1,7 @@
 #!/usr/bin/env ruby
 
-ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["RAILS_ENV"] ||= "development"
-ENV["NODE_ENV"]  ||= "development"
+ENV["NODE_ENV"]  ||= ENV["RAILS_ENV"]
 
 require "pathname"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",

bin/yarn

@@ -1,9 +1,10 @@
 #!/usr/bin/env ruby
-APP_ROOT = File.expand_path('..', __dir__)
+
+APP_ROOT = File.expand_path("..", __dir__)
 Dir.chdir(APP_ROOT) do
   yarn = ENV["PATH"].split(File::PATH_SEPARATOR).
     select { |dir| File.expand_path(dir) != __dir__ }.
-    product(["yarn", "yarn.cmd", "yarn.ps1"]).
+    product(["yarn", "yarnpkg", "yarn.cmd", "yarn.ps1"]).
     map { |dir, file| File.expand_path(file, dir) }.
     find { |file| File.executable?(file) }
 

config/initializers/assets.rb

@@ -20,3 +20,6 @@ Rails.application.config.assets.precompile += %w[markdown-buttons.png]
 Rails.application.config.assets.configure do |env|
   env.export_concurrent = false
 end
+
+# Add node_modules folder to the asset load path.
+Rails.application.config.assets.paths << Rails.root.join('node_modules')

config/initializers/content_security_policy.rb

@@ -7,6 +7,9 @@
 # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
 
 # Rails.application.config.content_security_policy do |policy|
+#   # If you are using webpack-dev-server then specify webpack-dev-server host
+#   policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development?
+
 #   policy.default_src :self, :https
 #   policy.font_src    :self, :https, :data
 #   policy.img_src     :self, :https, :data

config/webpack/environment.js

@@ -1,47 +0,0 @@
-/*
-./config/webpack/environment.js
-Info for this file can be found
-github.com/rails/webpacker/blob/master/docs/webpack.md
-*/
-
-const {environment} = require('@rails/webpacker')
-const {merge} = require('webpack-merge')
-const webpack = require('webpack')
-const erb = require('./loaders/erb')
-
-// Add an additional plugin of your choosing : ProvidePlugin
-environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
-        $: 'jquery',
-        JQuery: 'jquery',
-        jquery: 'jquery',
-        'window.Tether': "tether",
-        Popper: ['popper.js', 'default'], // for Bootstrap 4
-        _: 'underscore',
-        vis: 'vis',
-        hljs: 'highlight.js',
-        d3: 'd3',
-        Sentry: '@sentry/browser',
-        Sortable: 'sortablejs',
-    })
-)
-
-// This setting will change the absolute path used to refer
-// external files (images, fonts, ...) in the generated assets
-const relative_url_root = process.env.RAILS_RELATIVE_URL_ROOT || '';
-const public_output_path = environment.config.output.publicPath;
-environment.loaders.get('file')
-    .use.find(item => item.loader === 'file-loader')
-    .options.publicPath = relative_url_root + public_output_path;
-
-environment.loaders.append('erb', erb)
-
-const envConfig = module.exports = environment
-const aliasConfig = module.exports = {
-    resolve: {
-        alias: {
-            jquery: 'jquery/src/jquery',
-        }
-    }
-}
-
-module.exports = merge(envConfig.toWebpackConfig(), aliasConfig)

config/webpack/webpack.config.js

@@ -0,0 +1,47 @@
+// See the shakacode/shakapacker README and docs directory for advice on customizing your webpackConfig.
+
+const { webpackConfig, merge } = require('shakapacker')
+const webpack = require('webpack');
+
+// Custom ERB loader to disable Spring and prevent crashes
+const erb = require("./loaders/erb");
+
+// This setting will change the absolute path used to refer
+// external files (images, fonts, ...) in the generated assets
+const relative_url_root = process.env.RAILS_RELATIVE_URL_ROOT || '';
+const public_output_path = webpackConfig.output.publicPath;
+
+const envConfig = module.exports = {
+    output: {
+        publicPath: relative_url_root + public_output_path
+    },
+    module: {
+        rules: [
+            erb
+        ]
+    },
+    resolve: {
+        alias: {
+            $: 'jquery/src/jquery',
+            jquery: 'jquery/src/jquery',
+        }
+    },
+    plugins: [
+        new webpack.ProvidePlugin({
+            $: 'jquery',
+            JQuery: 'jquery',
+            jQuery: 'jquery',
+            jquery: 'jquery',
+            'window.Tether': "tether",
+            Popper: ['popper.js', 'default'], // for Bootstrap 4
+            _: 'underscore',
+            vis: 'vis',
+            hljs: 'highlight.js',
+            d3: 'd3',
+            Sentry: '@sentry/browser',
+            Sortable: 'sortablejs',
+        })
+    ]
+}
+
+module.exports = merge(webpackConfig, envConfig)

config/webpacker.yml

@@ -1,52 +1,20 @@
-# Note: You must restart bin/webpack-dev-server for changes to take effect
+# Note: You must restart bin/webpacker-dev-server for changes to take effect
 
 default: &default
   source_path: app/javascript
-  source_entry_path: packs
+  source_entry_path: /
   public_root_path: public
   public_output_path: packs
-  cache_path: tmp/cache/webpacker
+  cache_path: tmp/webpacker
-  webpack_compile_output: false
+  webpack_compile_output: true
 
-  # Additional paths webpack should lookup modules
+  # Additional paths webpack should look up modules
   # ['app/assets', 'engine/foo/app/assets']
   additional_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
-    - .gif
-    - .tiff
-    - .ico
-    - .svg
-    - .eot
-    - .otf
-    - .ttf
-    - .woff
-    - .woff2
-
-  extensions:
-    - .mjs
-    - .js
-    - .sass
-    - .scss
-    - .css
-    - .module.sass
-    - .module.scss
-    - .module.css
-    - .png
-    - .svg
-    - .gif
-    - .jpeg
-    - .jpg
-
 development:
   <<: *default
   compile: true
@@ -56,21 +24,28 @@ development:
     https: false
     host: localhost
     port: 3035
-    public: localhost:3035
+    # Hot Module Replacement updates modules while the application is running without a full reload
     hmr: false
-    # Inline should be set to true if using HMR
+    # Defaults to the inverse of hmr. Uncomment to manually set this.
-    inline: true
+    # live_reload: true
-    overlay: true
+    client:
+      # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
+      overlay: true
+      # May also be a string
+      # webSocketURL:
+      #  hostname: "0.0.0.0"
+      #  pathname: "/ws"
+      #  port: 8080
+    # Should we use gzip compression?
     compress: true
-    disable_host_check: true
+    # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
-    use_local_ip: false
+    allowed_hosts: "all"
-    quiet: false
+    pretty: true
-    pretty: false
     headers:
       'Access-Control-Allow-Origin': '*'
-    watch_options:
+    static:
-      ignored: '**/node_modules/**'
+      watch:
-
+        ignored: '**/node_modules/**'
 
 test:
   <<: *default
@@ -85,8 +60,5 @@ production:
   # Production depends on precompilation of packs prior to booting for performance.
   compile: false
 
-  # Extract and emit a css file
-  extract_css: true
-
   # Cache manifest.json for performance
   cache_manifest: true

docs/LOCAL_SETUP.md

@@ -76,7 +76,7 @@ After that make sure to configure the corresponding execution environment for th
 This project uses `webpacker` to integrate Webpack with Rails to deliver Frontend assets. During development, the `webpack-dev-server` automatically launches together with the Rails server if not specified otherwise. In case of missing JavaScript or stylesheets or for hot reloading in the browser, you might want to start the `webpack-dev-server` manually *before starting Rails*:
 
 ```shell script
-./bin/webpack-dev-server
+./bin/webpacker-dev-server
 ```
 
 This will launch a dedicated server on port 3035 (default setting) and allow incoming WebSocket connections from your browser.

package.json

@@ -1,11 +1,21 @@
 {
+  "name": "codeocean",
+  "private": true,
   "dependencies": {
+    "@babel/core": "7",
+    "@babel/plugin-transform-runtime": "7",
+    "@babel/preset-env": "7",
+    "@babel/runtime": "7",
     "@fortawesome/fontawesome-free": "^6.1.2",
-    "@rails/webpacker": "^5.4.3",
     "@sentry/browser": "^6.11.0",
+    "@webpack-cli/serve": "^1.7.0",
+    "babel-loader": "8",
     "bootstrap": "^4.6.2",
     "bootswatch": "^4.6.0",
     "chosen-js": "^1.8.7",
+    "compression-webpack-plugin": "9",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^4.0.0",
     "d3": "^7.6.1",
     "d3-tip": "^0.9.1",
     "highlight.js": "^11.5.1",
@@ -14,19 +24,37 @@
     "jquery-ui": "^1.13.1",
     "jquery-ujs": "^1.2.3",
     "jstree": "^3.3.12",
+    "mini-css-extract-plugin": "^2.6.1",
     "opensans-webkit": "^1.1.0",
+    "pnp-webpack-plugin": "1",
     "popper.js": "^1.16.1",
     "rails-erb-loader": "^5.5.2",
+    "sass": "^1.54.4",
+    "sass-loader": "^13.0.2",
+    "shakapacker": "^6.0.0-rc.14",
     "sortablejs": "^1.15.0",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "5",
     "underscore": "^1.13.4",
     "vis": "^4.21.0",
-    "webpack-merge": "^5.8.0"
+    "webpack": "5",
+    "webpack-assets-manifest": "5",
+    "webpack-cli": "4",
+    "webpack-merge": "5"
   },
   "devDependencies": {
-    "webpack-dev-server": "^3.11.2"
+    "webpack-dev-server": "^4.10.0"
   },
+  "babel": {
+    "presets": [
+      "./node_modules/shakapacker/package/babel/preset.js"
+    ]
+  },
+  "browserslist": [
+    "defaults"
+  ],
   "scripts": {
-    "webpack": "./bin/webpack",
+    "webpack": "./bin/webpacker",
-    "webpack-dev-server": "./bin/webpack-dev-server"
+    "webpack-dev-server": "./bin/webpacker-dev-server"
   }
 }