Update from webpacker v5 to shakapacker v6.0.0.rc13

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

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
-  webpack_compile_output: false
+  cache_path: tmp/webpacker
+  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
-    inline: true
-    overlay: true
+    # Defaults to the inverse of hmr. Uncomment to manually set this.
+    # live_reload: 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
-    use_local_ip: false
-    quiet: false
-    pretty: false
+    # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
+    allowed_hosts: "all"
+    pretty: true
     headers:
       'Access-Control-Allow-Origin': '*'
-    watch_options:
-      ignored: '**/node_modules/**'
-
+    static:
+      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