upgrade to shakapacker

2022-12-01 20:13:53 -06:00 · 2022-12-01 20:13:53 -06:00 · 552524e78b
commit 552524e78b
parent 2b77bc9fb8
28 changed files with 1580 additions and 4706 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -1 +0,0 @@
-> 1%, not ie <= 12
--- a/.gitignore
+++ b/.gitignore
@ -28,3 +28,10 @@
 yarn-debug.log*
 .yarn-integrity
 /dist
+
+/public/packs
+/public/packs-test
+/node_modules
+/yarn-error.log
+yarn-debug.log*
+.yarn-integrity
--- a/2
+++ b/2
@ -3,7 +3,7 @@ source 'https://rubygems.org'
 gem 'rails', '7.0.4'
 gem 'pg', '~> 1.4.5'

-gem 'webpacker', '5.4.3'
+gem 'shakapacker', '6.5.4'
 gem 'bootsnap', '>= 1.1.0', require: false

 gem 'oj', '~> 3.13.23'
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -54,8 +54,6 @@ GEM
    activerecord (7.0.4)
      activemodel (= 7.0.4)
      activesupport (= 7.0.4)
-    activerecord-import (1.4.1)
-      activerecord (>= 4.2)
    activestorage (7.0.4)
      actionpack (= 7.0.4)
      activejob (= 7.0.4)
@ -69,7 +67,7 @@ GEM
      minitest (>= 5.1)
      tzinfo (~> 2.0)
    bcrypt (3.1.18)
-    bootsnap (1.14.0)
+    bootsnap (1.15.0)
      msgpack (~> 1.2)
    builder (3.2.4)
    coderay (1.1.3)
@ -226,6 +224,11 @@ GEM
      rspec-support (~> 3.11)
    rspec-support (3.12.0)
    semantic_range (3.0.0)
+    shakapacker (6.5.4)
+      activesupport (>= 5.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 5.2)
+      semantic_range (>= 2.3.0)
    shellany (0.0.1)
    signed_multiset (0.2.1)
    sqlite3 (1.5.4)
@ -235,18 +238,13 @@ GEM
    timeout (0.3.0)
    tzinfo (2.0.5)
      concurrent-ruby (~> 1.0)
-    tzinfo-data (1.2022.6)
+    tzinfo-data (1.2022.7)
      tzinfo (>= 1.0.0)
    unitwise (2.3.0)
      liner (~> 0.2)
      memoizable (~> 0.4)
      parslet (~> 2.0)
      signed_multiset (~> 0.2)
-    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)
@ -256,7 +254,6 @@ PLATFORMS
  ruby

 DEPENDENCIES
-  activerecord-import (~> 1.4.1)
  bcrypt (~> 3.1.18)
  bootsnap (>= 1.1.0)
  dalli (~> 3.2.3)
@ -272,10 +269,10 @@ DEPENDENCIES
  rails-controller-testing
  redcarpet (~> 3.5.1)
  rspec-rails (~> 6.0.1)
+  shakapacker (= 6.5.4)
  sqlite3 (~> 1.5.4)
  tzinfo-data
  unitwise (~> 2.3.0)
-  webpacker (= 5.4.3)

 BUNDLED WITH
   2.3.22
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@ -1,35 +1,35 @@
-import '../styles';
+import './styles';
 import "vue-resize/dist/vue-resize";

 import Vue from 'vue'
 import { sync } from 'vuex-router-sync';
-import { swInit } from "../lib/ServiceWorker";
-import responsiveSync from "../lib/VuexResponsiveSync";
-import { createChannel } from "../lib/ActionCable";
+import { swInit } from "./lib/ServiceWorker";
+import responsiveSync from "./lib/VuexResponsiveSync";
+import { createChannel } from "./lib/ActionCable";
 import VueProgressBar from "vue-progressbar";
 import VueResize from "vue-resize";
-import config from '../config';
-import store from '../store';
-import router from '../router';
-import '../lib/GlobalMixins';
-import App from '../components/App';
+import config from './lib/config';
+import store from './store';
+import router from './router';
+import './lib/GlobalMixins';
+import App from './components/App';

-import AppAutocomplete from "../components/AppAutocomplete";
-import AppConfirm from "../components/AppConfirm";
-import AppDateTime from "../components/AppDateTime";
-import AppDatePicker from "../components/AppDatePicker";
-import AppDropdown from "../components/AppDropdown";
-import AppExpandTransition from "../components/AppExpandTransition";
-import AppIcon from "../components/AppIcon";
-import AppIconicIcon from "../components/AppIconicIcon";
-import AppModal from "../components/AppModal";
-import AppNavbar from "../components/AppNavbar";
-import AppPager from "../components/AppPager";
-import AppRating from "../components/AppRating";
-import AppSearchText from "../components/AppSearchText";
-import AppTagEditor from "../components/AppTagEditor";
-import AppTextField from "../components/AppTextField";
-import AppValidationErrors from "../components/AppValidationErrors";
+import AppAutocomplete from "./components/AppAutocomplete";
+import AppConfirm from "./components/AppConfirm";
+import AppDateTime from "./components/AppDateTime";
+import AppDatePicker from "./components/AppDatePicker";
+import AppDropdown from "./components/AppDropdown";
+import AppExpandTransition from "./components/AppExpandTransition";
+import AppIcon from "./components/AppIcon";
+import AppIconicIcon from "./components/AppIconicIcon";
+import AppModal from "./components/AppModal";
+import AppNavbar from "./components/AppNavbar";
+import AppPager from "./components/AppPager";
+import AppRating from "./components/AppRating";
+import AppSearchText from "./components/AppSearchText";
+import AppTagEditor from "./components/AppTagEditor";
+import AppTextField from "./components/AppTextField";
+import AppValidationErrors from "./components/AppValidationErrors";

 Vue.component("AppAutocomplete", AppAutocomplete);
 Vue.component("AppConfirm", AppConfirm);
@ -80,7 +80,7 @@ document.addEventListener('DOMContentLoaded', () => {
  window.$vm = new Vue({
    el: '#app',
    store,
-    router,
+    router: router,
    render: createElement => createElement('App'),
    mounted() {
      this.$nextTick(() => swInit(store));
--- a/app/javascript/lib/Api.js
+++ b/app/javascript/lib/Api.js
@ -1,4 +1,4 @@
-import config from '../config';
+import config from './config';
 import * as Errors from './Errors';

 class Api {
--- a/app/javascript/lib/config.js
+++ b/app/javascript/lib/config.js
--- a/app/javascript/router/index.js
+++ b/app/javascript/router/index.js
@ -1,34 +1,34 @@
 import Vue from 'vue';
 import Router from 'vue-router';

-import The404Page from './components/The404Page';
-import TheAboutPage from './components/TheAboutPage';
-import TheCalculator from './components/TheCalculator';
+import The404Page from '../components/The404Page';
+import TheAboutPage from '../components/TheAboutPage';
+import TheCalculator from '../components/TheCalculator';

-import TheLog from './components/TheLog';
-import TheLogList from './components/TheLogList';
-import TheLogCreator from './components/TheLogCreator';
-import TheLogEditor from './components/TheLogEditor';
+import TheLog from '../components/TheLog';
+import TheLogList from '../components/TheLogList';
+import TheLogCreator from '../components/TheLogCreator';
+import TheLogEditor from '../components/TheLogEditor';

-import TheFoodList from './components/TheFoodList';
-import TheFood from "./components/TheFood";
-import TheFoodEditor from "./components/TheFoodEditor";
-import TheFoodCreator from "./components/TheFoodCreator";
-import TheNotesList from './components/TheNotesList';
-import TheRecipe from './components/TheRecipe';
-import TheRecipeEditor from './components/TheRecipeEditor';
-import TheRecipeCreator from './components/TheRecipeCreator';
-import TheRecipeList from './components/TheRecipeList';
+import TheFoodList from '../components/TheFoodList';
+import TheFood from "../components/TheFood";
+import TheFoodEditor from "../components/TheFoodEditor";
+import TheFoodCreator from "../components/TheFoodCreator";
+import TheNotesList from '../components/TheNotesList';
+import TheRecipe from '../components/TheRecipe';
+import TheRecipeEditor from '../components/TheRecipeEditor';
+import TheRecipeCreator from '../components/TheRecipeCreator';
+import TheRecipeList from '../components/TheRecipeList';

-import TheTaskListList from './components/TheTaskListList';
+import TheTaskListList from '../components/TheTaskListList';

-import TheUserCreator from './components/TheUserCreator';
-import TheUserEditor from './components/TheUserEditor';
+import TheUserCreator from '../components/TheUserCreator';
+import TheUserEditor from '../components/TheUserEditor';

-import TheAdminUserList from './components/TheAdminUserList';
-import TheAdminUserEditor from './components/TheAdminUserEditor';
+import TheAdminUserList from '../components/TheAdminUserList';
+import TheAdminUserEditor from '../components/TheAdminUserEditor';

-import $store from './store';
+import $store from '../store';

 Vue.use(Router);

--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@ -11,6 +11,7 @@


  <%= csrf_meta_tags %>
+    <%= javascript_pack_tag "application" %>
 </head>
 <body>

--- a/babel.config.js
+++ b/babel.config.js
@ -1,79 +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-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,
-          regenerator: true,
-          corejs: false
-        }
-      ],
-      [
-        '@babel/plugin-transform-regenerator',
-        {
-          async: false
-        }
-      ]
-    ].filter(Boolean)
-  }
-}
--- a/bin/setup
+++ b/bin/setup
@ -17,6 +17,9 @@ FileUtils.chdir APP_ROOT do
  system! "gem install bundler --conservative"
  system("bundle check") || system!("bundle install")

+  # Install JavaScript dependencies
+  system! "bin/yarn"
+
  # puts "\n== Copying sample files =="
  # unless File.exist?("config/database.yml")
  #   FileUtils.cp "config/database.yml.sample", "config/database.yml"
--- a/bin/webpacker
+++ b/bin/webpacker
@ -0,0 +1,13 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= "development"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", __FILE__)
+
+require "bundler/setup"
+require "webpacker"
+require "webpacker/webpack_runner"
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::WebpackRunner.run(ARGV)
+end
--- a/bin/webpacker-dev-server
+++ b/bin/webpacker-dev-server
@ -0,0 +1,13 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= "development"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", __FILE__)
+
+require "bundler/setup"
+require "webpacker"
+require "webpacker/dev_server_runner"
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::DevServerRunner.run(ARGV)
+end
--- a/bin/yarn
+++ b/bin/yarn
@ -0,0 +1,18 @@
+#!/usr/bin/env ruby
+
+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", "yarnpkg", "yarn.cmd", "yarn.ps1"]).
+    map { |dir, file| File.expand_path(file, dir) }.
+    find { |file| File.executable?(file) }
+
+  if yarn
+    exec yarn, *ARGV
+  else
+    $stderr.puts "Yarn executable was not detected in the system."
+    $stderr.puts "Download Yarn at https://yarnpkg.com/en/docs/install"
+    exit 1
+  end
+end
--- a/config/webpack/development.js
+++ b/config/webpack/development.js
@ -1,5 +0,0 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'development'
-
-const environment = require('./environment')
-
-module.exports = environment.toWebpackConfig()
--- a/config/webpack/docker.js
+++ b/config/webpack/docker.js
@ -1,5 +0,0 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'production'
-
-const environment = require('./environment')
-
-module.exports = environment.toWebpackConfig()
--- a/config/webpack/environment.js
+++ b/config/webpack/environment.js
@ -1,13 +0,0 @@
-const { environment } = require('@rails/webpacker');
-const { VueLoaderPlugin } = require('vue-loader');
-const vue =  require('./loaders/vue');
-const svg =  require('./loaders/svg');
-
-environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin());
-environment.loaders.prepend('vue', vue);
-environment.loaders.prepend('svg', svg);
-
-const fileLoader = environment.loaders.get('file');
-fileLoader.exclude = /\.(svg)$/i;
-
-module.exports = environment;
--- a/config/webpack/loaders/svg.js
+++ b/config/webpack/loaders/svg.js
@ -1,18 +0,0 @@
-const path = require("path");
-
-module.exports = {
-  test: /\/iconic\/svg\/.*\.svg$/,
-  use: [{
-    loader: path.join(__dirname, 'iconic_svg_loader.js')
-  }]
-};
-
-// module.exports = {
-//   test: /\.svg$/,
-//   use: [{
-//     loader: 'url-loader',
-//     options: {
-//       limit: 10000
-//     }
-//   }]
-// };
--- a/config/webpack/loaders/vue.js
+++ b/config/webpack/loaders/vue.js
@ -1,6 +0,0 @@
-module.exports = {
-  test: /\.vue(\.erb)?$/,
-  use: [{
-    loader: 'vue-loader'
-  }]
-}
--- a/config/webpack/production.js
+++ b/config/webpack/production.js
@ -1,5 +0,0 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'production'
-
-const environment = require('./environment')
-
-module.exports = environment.toWebpackConfig()
--- a/config/webpack/rules/css.js
+++ b/config/webpack/rules/css.js
@ -0,0 +1,5 @@
+module.exports = {
+    resolve: {
+        extensions: ['.css', '.scss']
+    }
+}
--- a/config/webpack/rules/svg.js
+++ b/config/webpack/rules/svg.js
@ -0,0 +1,19 @@
+const path = require("path");
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\/iconic\/svg\/.*\.svg$/,
+        use: [
+          'vue-loader',
+          path.join(__dirname, '../loaders/iconic_svg_loader.js')
+        ],
+        type: 'asset/source'
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['.svg']
+  }
+}
--- a/config/webpack/rules/vue.js
+++ b/config/webpack/rules/vue.js
@ -0,0 +1,16 @@
+const { VueLoaderPlugin } = require('vue-loader')
+
+module.exports = {
+    module: {
+        rules: [
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader'
+            }
+        ]
+    },
+    plugins: [new VueLoaderPlugin()],
+    resolve: {
+        extensions: ['.vue']
+    }
+}
--- a/config/webpack/test.js
+++ b/config/webpack/test.js
@ -1,5 +0,0 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'development'
-
-const environment = require('./environment')
-
-module.exports = environment.toWebpackConfig()
--- a/config/webpack/webpack.config.js
+++ b/config/webpack/webpack.config.js
@ -0,0 +1,32 @@
+const { merge, mergeWithRules, webpackConfig } = require('shakapacker')
+const cssConfig = require('./rules/css');
+const vueConfig = require('./rules/vue');
+const svgConfig = require('./rules/svg');
+
+let conf = merge(vueConfig, svgConfig);
+conf = merge(cssConfig, conf);
+conf = merge(conf, webpackConfig);
+
+const updateFileLoaderConf = {
+    module: {
+        rules: [
+            {
+                type: 'asset/resource',
+                // This version does not include svg. See https://github.com/shakacode/shakapacker/blob/v6.2.0/package/rules/file.js
+                test: /\.(bmp|gif|jpe?g|png|tiff|ico|avif|webp|eot|otf|ttf|woff|woff2)$/
+            }
+        ]
+    }
+}
+
+conf = mergeWithRules({
+    module: {
+        rules: {
+            type: "match",
+            test: "replace"
+        }
+    }
+})(conf, updateFileLoaderConf);
+
+
+module.exports = conf
--- a/config/webpacker.yml
+++ b/config/webpacker.yml
@ -1,80 +1,88 @@
-# 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
-  public_root_path: public
  source_path: app/javascript
-  source_entry_path: packs
+
+  # You can have a subdirectory of the source_path, like 'packs' (recommended).
+  # Alternatively, you can use '/' to use the whole source_path directory.
+  source_entry_path: /
+
+  # If nested_entries is true, then we'll pick up subdirectories within the source_entry_path.
+  # You cannot set this option to true if you set source_entry_path to '/'
+  nested_entries: false
+
+  #  While using a File-System-based automated bundle generation feature, miscellaneous warnings suggesting css order
+  #  conflicts may arise due to the mini-css-extract-plugin. For projects where css ordering has been mitigated through
+  #  consistent use of scoping or naming conventions, the css order warnings can be disabled by setting
+  #  css_extract_ignore_order_warnings to true
+  css_extract_ignore_order_warnings: false
+
+  public_root_path: public
  public_output_path: packs
-  cache_path: tmp/cache/webpacker
-  check_yarn_integrity: false
-  webpack_compile_output: false
+  cache_path: tmp/webpacker
+  webpack_compile_output: true
+  # See https://github.com/shakacode/shakapacker#deployment
+  webpacker_precompile: true
+
+  # Location for manifest.json, defaults to {public_output_path}/manifest.json if unset
+  # manifest_path: public/packs/manifest.json

  # Additional paths webpack should look up modules
  # ['app/assets', 'engine/foo/app/assets']
-  resolved_paths: []
+  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: false
+  # Select loader to use, available options are 'babel' (default), 'swc' or 'esbuild'
+  webpack_loader: 'babel'

-  static_assets_extensions:
-    - .jpg
-    - .jpeg
-    - .png
-    - .gif
-    - .tiff
-    - .ico
-    - .svg
-    - .eot
-    - .otf
-    - .ttf
-    - .woff
-    - .woff2
+  # Set to true to enable check for matching versions of shakapacker gem and NPM package - will raise an error if there is a mismatch or wildcard versioning is used
+  ensure_consistent_versioning: false

-  extensions:
-    - .vue
-    - .mjs
-    - .js
-    - .sass
-    - .scss
-    - .css
-    - .module.sass
-    - .module.scss
-    - .module.css
-    - .png
-    - .svg
-    - .gif
-    - .jpeg
-    - .jpg
+  # Select whether the compiler will use SHA digest ('digest' option) or most most recent modified timestamp ('mtime') to determine freshness
+  compiler_strategy: digest

 development:
  <<: *default
  compile: true
-
-  # Verifies that versions and hashed value of the package contents in the project's package.json
-  check_yarn_integrity: true
+  compiler_strategy: mtime

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
-    host: 0.0.0.0
+    host: localhost
    port: 3035
-    public: localhost:3035
-    hmr: true
-    # Inline should be set to true if using HMR
-    inline: true
+    # Hot Module Replacement updates modules while the application is running without a full reload
+    hmr: false
+    # If HMR is on, CSS will by inlined by delivering it as part of the script payload via style-loader. Be sure
+    # that you add style-loader to your project dependencies.
+    #
+    # If you want to instead deliver CSS via <link> with the mini-extract-css-plugin, set inline_css to false.
+    # In that case, style-loader is not needed as a dependency.
+    #
+    # mini-extract-css-plugin is a required dependency in both cases.
+    inline_css: 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
+    # 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
@ -89,9 +97,6 @@ production: &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

--- a/package.json
+++ b/package.json
@ -1,27 +1,50 @@
 {
+  "name": "parsley",
+  "private": true,
  "dependencies": {
+    "@babel/core": "7",
+    "@babel/plugin-transform-runtime": "7",
+    "@babel/preset-env": "7",
+    "@babel/runtime": "7",
    "@rails/actioncable": "^7.0.4",
-    "@rails/webpacker": "5.4.3",
    "@tweenjs/tween.js": "^18.6.4",
-    "autosize": "^4.0.2",
-    "bulma": "0.9.3",
-    "cheerio": "^1.0.0-rc.9",
-    "css-loader": "^5.2.4",
+    "autosize": "^5.0.2",
+    "babel-loader": "8",
+    "bulma": "0.9.4",
+    "cheerio": "^1.0.0-rc.12",
+    "compression-webpack-plugin": "9",
+    "css-loader": "^6.7.2",
+    "css-minimizer-webpack-plugin": "^4.2.2",
    "lodash": "^4.17.21",
+    "mini-css-extract-plugin": "^2.7.1",
+    "sass": "^1.56.1",
+    "sass-loader": "^13.2.0",
+    "shakapacker": "6.5.4",
+    "style-loader": "^3.3.1",
    "svg-loader": "^0.0.2",
-    "url-loader": "4.1.1",
-    "vue": "^2.6.12",
-    "vue-loader": "^15.9.6",
+    "terser-webpack-plugin": "5",
+    "url-loader": "^4.1.1",
+    "vue": "^2.6.14",
+    "vue-loader": "^15.10.1",
    "vue-progressbar": "^0.7.5",
    "vue-resize": "^1.0.1",
-    "vue-router": "^3.5.1",
-    "vue-template-compiler": "^2.6.12",
+    "vue-router": "^3.6.5",
+    "vue-template-compiler": "^2.6.14",
    "vuex": "^3.6.2",
    "vuex-router-sync": "^5.0.0",
-    "webpack": "^4.46.0"
+    "webpack": "5",
+    "webpack-assets-manifest": "5",
+    "webpack-cli": "4",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-merge": "5"
  },
-  "devDependencies": {
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.2"
-  }
+  "version": "0.1.0",
+  "babel": {
+    "presets": [
+      "./node_modules/shakapacker/package/babel/preset.js"
+    ]
+  },
+  "browserslist": [
+    "defaults"
+  ]
 }
--- a/yarn.lock
+++ b/yarn.lock