Upgrade to shakapacker-6.0.0-rc.14

.browserslistrc

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

.eslintrc.js

@@ -19,18 +19,21 @@ module.exports = {
     'jsx-a11y/label-has-for': 'off',
     'jsx-a11y/anchor-is-valid': 'off',
     'import/no-unresolved': 'off',
-    'vue/max-attributes-per-line': ['error', {
-      'singleline': 20,
-      'multiline': {
-        'max': 1,
-        'allowFirstLine': false
+    'vue/max-attributes-per-line': [
+      'error',
+      {
+        singleline: 20,
+        multiline: {
+          max: 1,
+          allowFirstLine: false,
+        },
       },
-    }],
+    ],
     'vue/html-self-closing': 'off',
-    "vue/no-v-html": 'off',
+    'vue/no-v-html': 'off',
     'vue/singleline-html-element-content-newline': 'off',
     'import/extensions': ['off'],
-    'no-console': 'error'
+    'no-console': 'error',
   },
   settings: {
     'import/resolver': {
@@ -43,7 +46,7 @@ module.exports = {
     browser: true,
     node: true,
     jest: true,
-    jasmine: true
+    jasmine: true,
   },
   globals: {
     __WEBPACK_ENV__: true,

.gitignore

@@ -62,4 +62,10 @@ package-lock.json
 test/cypress/videos/*
 
 /config/master.key
-/config/*.enc
+/config/*.enc
+/public/packs
+/public/packs-test
+/node_modules
+/yarn-error.log
+yarn-debug.log*
+.yarn-integrity

.storybook/main.js

@@ -1,9 +1,10 @@
 const path = require('path');
-const resolve = require('../config/webpack/resolve');
 
-// Chatwoot's webpack.config.js
+const resolve = require('../config/webpack/resolve'); // Chatwoot's webpack.config.js
+
 process.env.NODE_ENV = 'development';
-const custom = require('../config/webpack/environment');
+
+const custom = require('../config/webpack/webpack.config');
 
 module.exports = {
   stories: [
@@ -29,16 +30,18 @@ module.exports = {
       ...config,
       resolve: {
         ...config.resolve,
-        modules: custom.resolvedModules.map(i => i.value),
+        ...resolve,
+        // modules: custom.resolvedModules.map(i => i.value),
       },
     };
-
     newConfig.module.rules.push({
       test: /\.scss$/,
       use: ['style-loader', 'css-loader', 'sass-loader'],
       include: path.resolve(__dirname, '../app/javascript'),
     });
-
     return newConfig;
   },
+  core: {
+    builder: 'webpack5',
+  },
 };

Gemfile

@@ -56,7 +56,7 @@ gem 'activerecord-import'
 gem 'dotenv-rails'
 gem 'foreman'
 gem 'puma'
-gem 'webpacker', '~> 5.x'
+gem 'shakapacker', '6.0.0.rc.13'
 # metrics on heroku
 gem 'barnes'
 

Gemfile.lock

@@ -545,6 +545,11 @@ GEM
       sentry-ruby-core (~> 5.1.0)
       sidekiq (>= 3.0)
     sexp_processor (4.16.0)
+    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)
     sidekiq (6.4.1)
@@ -623,11 +628,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)
     webpush (1.1.0)
       hkdf (~> 0.2)
       jwt (~> 2.0)
@@ -729,6 +729,7 @@ DEPENDENCIES
   sentry-rails
   sentry-ruby
   sentry-sidekiq
+  shakapacker (= 6.0.0.rc.13)
   shoulda-matchers
   sidekiq (~> 6.4.0)
   sidekiq-cron (~> 1.3)
@@ -746,7 +747,6 @@ DEPENDENCIES
   valid_email2
   web-console
   webmock
-  webpacker (~> 5.x)
   webpush
   wisper (= 2.0.0)
   working_hours

Procfile.dev

@@ -1,3 +1,3 @@
 backend: bin/rails s -p 3000
-frontend: bin/webpack-dev-server
+frontend: bin/webpacker-dev-server
 worker: bundle exec sidekiq -C config/sidekiq.yml

Procfile.test

@@ -1,3 +1,3 @@
 backend: RAILS_ENV=test bin/rails s -p 5050
-frontend: bin/webpack-dev-server
+frontend: bin/webpacker-dev-server
 worker: RAILS_ENV=test bundle exec sidekiq -C config/sidekiq.yml

app/javascript/dashboard/assets/scss/widgets/_reports.scss

@@ -29,7 +29,7 @@
 .business-hours {
   align-items: center;
   display: flex;
-  justify-content: end;
+  justify-content: flex-end;
   margin-bottom: var(--space-normal);
   margin-left: auto;
   padding-right: var(--space-normal);

app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue

@@ -83,7 +83,7 @@ export default {
   border-bottom-right-radius: var(--border-radius-normal);
   display: flex;
   height: 100%;
-  justify-content: end;
+  justify-content: flex-end;
   opacity: 1;
   position: absolute;
   right: 0;

app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue

@@ -45,11 +45,12 @@ export default {
 }
 
 .menu-item {
-  display: inline-flex;
-  position: relative;
   border-radius: var(--border-radius-large);
   border: 1px solid transparent;
   color: var(--s-600);
+  display: inline-flex;
+  height: auto;
+  position: relative;
 
   &:hover {
     background: var(--w-25);

app/javascript/packs/application.js

@@ -40,8 +40,6 @@ import {
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 
-Vue.config.env = process.env;
-
 if (window.errorLoggingConfig) {
   Sentry.init({
     Vue,

app/javascript/sdk/index.js

@@ -1,17 +1,14 @@
 import Cookies from 'js-cookie';
-import { IFrameHelper } from '../sdk/IFrameHelper';
-import {
-  getBubbleView,
-  getDarkMode,
-  getWidgetStyle,
-} from '../sdk/settingsHelper';
+import { IFrameHelper } from './IFrameHelper';
+import { getBubbleView, getDarkMode, getWidgetStyle } from './settingsHelper';
 import {
   computeHashForUserData,
   getUserCookieName,
   hasUserKeys,
-} from '../sdk/cookieHelpers';
-import { addClass, removeClass } from '../sdk/DOMHelpers';
+} from './cookieHelpers';
+import { addClass, removeClass } from './DOMHelpers';
 import { SDK_SET_BUBBLE_VISIBILITY } from 'shared/constants/sharedFrameEvents';
+
 const runSDK = ({ baseUrl, websiteToken }) => {
   if (window.$chatwoot) {
     return;
@@ -143,6 +140,4 @@ const runSDK = ({ baseUrl, websiteToken }) => {
   });
 };
 
-window.chatwootSDK = {
-  run: runSDK,
-};
+export const chatwootSDK = { run: runSDK };

babel.config.js

@@ -1,14 +1,5 @@
 /* eslint-disable global-require */
-const plugins = () => [
-  require('babel-plugin-macros'),
-  [
-    require('@babel/plugin-proposal-class-properties').default,
-    {
-      loose: true,
-    },
-  ],
-  [require('babel-plugin-transform-vue-jsx')],
-];
+const plugins = () => ['transform-vue-jsx'];
 
 module.exports = api => {
   const validEnv = ['development', 'test', 'production'];

bin/webpack

@@ -1,19 +0,0 @@
-#!/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 'rubygems'
-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

bin/webpack-dev-server

@@ -1,19 +0,0 @@
-#!/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 'rubygems'
-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

bin/webpacker

@@ -0,0 +1,15 @@
+#!/usr/bin/env ruby
+
+require "pathname"
+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)
+end

bin/webpacker-dev-server

@@ -0,0 +1,18 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= "development"
+ENV["NODE_ENV"]  ||= ENV["RAILS_ENV"]
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+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

bin/yarn

@@ -1,9 +1,18 @@
 #!/usr/bin/env ruby
-APP_ROOT = File.expand_path('..', __dir__)
+
+APP_ROOT = File.expand_path("..", __dir__)
 Dir.chdir(APP_ROOT) do
-  exec 'yarnpkg', *ARGV
-rescue Errno::ENOENT
-  warn 'Yarn executable was not detected in the system.'
-  warn 'Download Yarn at https://yarnpkg.com/en/docs/install'
-  exit 1
+  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

config/initializers/assets.rb

@@ -18,3 +18,6 @@ Rails.application.config.assets.precompile += %w[dashboardChart.js]
 # Ref: https://stackoverflow.com/questions/56960709/rails-font-cors-policy
 # https://github.com/rails/sprockets/issues/632#issuecomment-551324428
 Rails.application.config.assets.precompile << ['*.svg', '*.eot', '*.woff', '*.ttf']
+
+# 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

@@ -4,7 +4,9 @@
 # For further information see the following documentation
 # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
 
-# Rails.application.config.content_security_policy do |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/development.js

@@ -1,5 +0,0 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'development';
-
-const environment = require('./environment');
-
-module.exports = environment.toWebpackConfig();

config/webpack/environment.js

@@ -1,33 +0,0 @@
-const { environment } = require('@rails/webpacker');
-const { VueLoaderPlugin } = require('vue-loader');
-const resolve = require('./resolve');
-const vue = require('./loaders/vue');
-
-environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin());
-environment.loaders.prepend('vue', vue);
-
-environment.loaders.append('opus', {
-  test: /encoderWorker\.min\.js$/,
-  loader: 'file-loader',
-  options: {
-    name: '[name].[ext]',
-  },
-});
-
-environment.loaders.append('audio', {
-  test: /\.(mp3)(\?.*)?$/,
-  loader: 'url-loader',
-  query: {
-    limit: 10000,
-    name: 'audio/[name].[ext]',
-  },
-});
-
-environment.config.merge({ resolve });
-environment.config.set('output.filename', chunkData => {
-  return chunkData.chunk.name === 'sdk'
-    ? 'js/[name].js'
-    : 'js/[name]-[hash].js';
-});
-
-module.exports = environment;

config/webpack/loaders/vue.js

@@ -1,6 +0,0 @@
-module.exports = {
-  test: /\.vue(\.erb)?$/,
-  use: [{
-    loader: 'vue-loader'
-  }]
-}

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()

config/webpack/resolve.js

@@ -1,18 +1,20 @@
 const path = require('path');
 
 const resolve = {
-  extensions: ['.js', '.vue'],
+  extensions: ['.vue', '.js', '.css'],
   alias: {
     vue$: 'vue/dist/vue.common.js',
     dashboard: path.resolve('./app/javascript/dashboard'),
     widget: path.resolve('./app/javascript/widget'),
     survey: path.resolve('./app/javascript/survey'),
     assets: path.resolve('./app/javascript/dashboard/assets'),
+    shared: path.resolve('./app/javascript/shared'),
     components: path.resolve('./app/javascript/dashboard/components'),
-    './iconfont.eot': 'vue-easytable/libs/font/iconfont.eot',
-    './iconfont.woff': 'vue-easytable/libs/font/iconfont.woff',
-    './iconfont.ttf': 'vue-easytable/libs/font/iconfont.ttf',
-    './iconfont.svg': 'vue-easytable/libs/font/iconfont.svg',
+    'iconfont.eot': 'vue-easytable/libs/font/iconfont.eot',
+    'iconfont.woff': 'vue-easytable/libs/font/iconfont.woff',
+    'iconfont.ttf': 'vue-easytable/libs/font/iconfont.ttf',
+    'iconfont.svg': 'vue-easytable/libs/font/iconfont.svg',
+    process: 'process/browser',
   },
 };
 

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()

config/webpack/webpack.config.js

@@ -0,0 +1,53 @@
+const { webpackConfig, merge } = require('shakapacker');
+const webpack = require('webpack');
+const { VueLoaderPlugin } = require('vue-loader');
+const resolve = require('./resolve');
+const path = require('path');
+
+const moduleConfig = {
+  module: {
+    rules: [
+      {
+        test: /\.vue(\.erb)?$/,
+        loader: 'vue-loader',
+      },
+      {
+        test: /encoderWorker\.min\.js$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]',
+        },
+      },
+    ],
+  },
+  node: {
+    global: true,
+  },
+};
+
+const moduleWebpackConfig = merge(moduleConfig, webpackConfig);
+
+const customConfig = {
+  entry: {
+    sdk: {
+      import: path.resolve('./app/javascript/sdk/index.js'),
+      library: {
+        name: 'chatwootSDK',
+        type: 'var',
+      },
+    },
+  },
+  node: {
+    global: true,
+  },
+  resolve,
+  plugins: [
+    new VueLoaderPlugin(),
+    new webpack.DefinePlugin({
+      // This is hack for vuelidate to work, should be removed in future.
+      'process.env.BUILD': '"web"',
+    }),
+  ],
+};
+
+module.exports = merge(moduleWebpackConfig, customConfig);

config/webpacker.yml

@@ -1,82 +1,51 @@
-# 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
   public_root_path: public
   public_output_path: packs
-  cache_path: tmp/cache/webpacker
-  check_yarn_integrity: 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']
-  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
-
-  static_assets_extensions:
-    - .jpg
-    - .jpeg
-    - .png
-    - .gif
-    - .tiff
-    - .ico
-    - .svg
-    - .eot
-    - .otf
-    - .ttf
-    - .woff
-    - .woff2
-
-  extensions:
-    - .vue
-    - .mjs
-    - .js
-    - .sass
-    - .scss
-    - .css
-    - .module.sass
-    - .module.scss
-    - .module.css
-    - .png
-    - .svg
-    - .gif
-    - .jpeg
-    - .jpg
-
 development:
   <<: *default
   compile: true
 
-  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
-  check_yarn_integrity: true
-
   # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
     https: false
-    host: 0.0.0.0
+    host: localhost
     port: 3035
-    public: 0.0.0.0: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
+    # 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': '*'
-      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS'
-      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
-    watch_options:
-      ignored: '**/node_modules/**'
-
+    static:
+      watch:
+        ignored: '**/node_modules/**'
 
 test:
   <<: *default
@@ -91,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

docker-compose.yaml

@@ -80,7 +80,7 @@ services:
       - NODE_ENV=development
       - RAILS_ENV=development
     entrypoint: docker/entrypoints/webpack.sh
-    command: bin/webpack-dev-server
+    command: bin/webpacker-dev-server
 
   postgres:
     image: postgres:12

docker/dockerfiles/webpack.Dockerfile

@@ -3,4 +3,4 @@ FROM chatwoot:development
 RUN chmod +x docker/entrypoints/webpack.sh
 
 EXPOSE 3035
-CMD ["bin/webpack-dev-server"]
+CMD ["bin/webpacker-dev-server"]

package.json

@@ -17,23 +17,30 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@babel/core": "7",
+    "@babel/plugin-transform-runtime": "7",
+    "@babel/preset-env": "7",
+    "@babel/runtime": "7",
     "@braid/vue-formulate": "^2.5.2",
     "@chatwoot/prosemirror-schema": "https://github.com/chatwoot/prosemirror-schema.git#7e8acadd10d7b932c0dc0bd0a18f804434f83517",
     "@chatwoot/utils": "^0.0.6",
     "@hcaptcha/vue-hcaptcha": "^0.3.2",
     "@rails/actioncable": "6.1.3",
-    "@rails/webpacker": "5.3.0",
     "@sentry/tracing": "^6.4.1",
     "@sentry/vue": "^6.4.1",
     "activestorage": "^5.2.6",
     "axios": "^0.21.2",
+    "babel-loader": "8",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-vue-jsx": "^3.7.0",
     "bourbon": "^6.0.0",
     "chart.js": "~2.9.4",
+    "compression-webpack-plugin": "9",
     "copy-text-to-clipboard": "2.2.0",
     "core-js": "3.11.0",
     "country-code-emoji": "^1.0.0",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^3.4.1",
     "date-fns": "2.21.1",
     "date-fns-tz": "^1.3.3",
     "dompurify": "2.2.7",
@@ -45,17 +52,27 @@
     "lodash.groupby": "^4.6.0",
     "marked": "4.0.10",
     "md5": "^2.3.0",
+    "mini-css-extract-plugin": "^2.6.0",
     "ninja-keys": "^1.1.9",
     "opus-recorder": "^8.0.5",
+    "pnp-webpack-plugin": "1",
+    "postcss": "^8.4.13",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-loader": "^6.2.1",
+    "postcss-preset-env": "^7.5.0",
     "posthog-js": "^1.13.7",
     "prosemirror-markdown": "1.5.1",
     "prosemirror-state": "1.3.4",
     "prosemirror-view": "1.18.4",
     "query-string": "5",
+    "sass": "^1.51.0",
+    "sass-loader": "^12.6.0",
     "semver": "7.3.5",
+    "shakapacker": "^6.0.0-rc.14",
     "spinkit": "~1.2.5",
+    "style-loader": "^3.3.1",
     "tailwindcss": "^1.9.6",
-    "url-loader": "^2.0.0",
+    "terser-webpack-plugin": "5",
     "v-tooltip": "~2.1.3",
     "videojs-record": "^4.5.0",
     "vue": "2.6.12",
@@ -66,7 +83,7 @@
     "vue-dompurify-html": "^2.5.1",
     "vue-easytable": "2.5.5",
     "vue-i18n": "8.24.3",
-    "vue-loader": "15.9.6",
+    "vue-loader": "15.9.8",
     "vue-multiselect": "~2.1.6",
     "vue-router": "~3.5.2",
     "vue-template-compiler": "2.6.12",
@@ -76,24 +93,28 @@
     "vuelidate": "0.7.6",
     "vuex": "~2.1.1",
     "vuex-router-sync": "~4.1.2",
-    "wavesurfer.js": "^6.0.4"
+    "wavesurfer.js": "^6.0.4",
+    "webpack": "5",
+    "webpack-assets-manifest": "5",
+    "webpack-cli": "4",
+    "webpack-merge": "5"
   },
   "devDependencies": {
-    "@babel/core": "7.13.16",
     "@babel/plugin-proposal-class-properties": "7.13.0",
-    "@babel/preset-env": "7.13.15",
-    "@storybook/addon-actions": "6.2.9",
-    "@storybook/addon-docs": "^6.2.9",
-    "@storybook/addon-essentials": "6.2.9",
-    "@storybook/addon-links": "6.2.9",
-    "@storybook/addons": "6.2.9",
-    "@storybook/vue": "6.2.9",
+    "@babel/plugin-syntax-jsx": "^7.16.7",
+    "@storybook/addon-actions": "^6.4.0",
+    "@storybook/addon-docs": "^6.4.0",
+    "@storybook/addon-essentials": "^6.4.0",
+    "@storybook/addon-links": "^6.4.0",
+    "@storybook/addons": "^6.4.0",
+    "@storybook/builder-webpack5": "^6.4.0",
+    "@storybook/manager-webpack5": "^6.4.0",
+    "@storybook/vue": "^6.4.0",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
     "@vue/test-utils": "1.1.4",
-    "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-jest": "25.5.1",
-    "babel-loader": "8.2.2",
     "babel-preset-vue": "^2.0.2",
     "cypress": "4.12.1",
     "eslint": "^6.8.0",
@@ -107,15 +128,17 @@
     "eslint-plugin-prettier": "3.4.0",
     "eslint-plugin-vue": "^6.2.2",
     "expect-more-jest": "^2.4.2",
+    "file-loader": "^6.2.0",
     "husky": "^7.0.0",
     "jest": "26.6.3",
     "jest-serializer-vue": "^2.0.2",
     "jest-transform-stub": "^2.0.0",
     "lint-staged": "10.5.4",
+    "postcss-import": "^14.1.0",
     "prettier": "^1.16.4",
     "rimraf": "^3.0.0",
-    "vue-jest": "3.0.7",
-    "webpack-dev-server": "3.11.2"
+    "vue-jest": "^4.0.0",
+    "webpack-dev-server": "^4.9.0"
   },
   "engines": {
     "node": ">=10.x",
@@ -135,6 +158,11 @@
       "text"
     ]
   },
+  "babel": {
+    "presets": [
+      "./node_modules/shakapacker/package/babel/preset.js"
+    ]
+  },
   "lint-staged": {
     "app/**/*.{js,vue}": [
       "eslint --fix",
@@ -147,5 +175,8 @@
     "*.scss": [
       "scss-lint"
     ]
-  }
+  },
+  "browserslist": [
+    "defaults "
+  ]
 }