Make webpack 5 work

build/webpack.base.conf.js

@@ -2,7 +2,7 @@ var path = require('path')
 var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
-var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
+var ServiceWorkerWebpackPlugin = require('serviceworker-webpack5-plugin')
 var CopyPlugin = require('copy-webpack-plugin');
 var { VueLoaderPlugin } = require('vue-loader')
 var ESLintPlugin = require('eslint-webpack-plugin');
@@ -42,6 +42,10 @@ module.exports = {
       'assets': path.resolve(__dirname, '../src/assets'),
       'components': path.resolve(__dirname, '../src/components'),
       'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
+    },
+    fallback: {
+      'querystring': require.resolve('querystring-es3'),
+      'url': require.resolve('url/')
     }
   },
   module: {

build/webpack.dev.conf.js

@@ -16,7 +16,7 @@ module.exports = merge(baseWebpackConfig, {
   },
   mode: 'development',
   // eval-source-map is faster for development
-  devtool: '#eval-source-map',
+  devtool: 'eval-source-map',
   plugins: [
     new webpack.DefinePlugin({
       'process.env': config.dev.env,

build/webpack.prod.conf.js

@@ -19,7 +19,7 @@ var webpackConfig = merge(baseWebpackConfig, {
   module: {
     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, extract: true })
   },
-  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  devtool: config.build.productionSourceMap ? 'source-map' : false,
   optimization: {
     minimize: true,
     splitChunks: {

package.json

@@ -34,10 +34,12 @@
     "escape-html": "1.0.3",
     "js-cookie": "3.0.1",
     "localforage": "1.10.0",
-    "parse-link-header": "1.0.1",
+    "parse-link-header": "2.0.0",
     "phoenix": "1.6.2",
     "punycode.js": "2.1.0",
     "qrcode": "1.5.0",
+    "querystring-es3": "^0.2.1",
+    "url": "^0.11.0",
     "utf8": "3.0.0",
     "vue": "3.2.37",
     "vue-i18n": "9.2.2",
@@ -94,7 +96,7 @@
     "karma-sinon-chai": "2.0.2",
     "karma-sourcemap-loader": "0.3.8",
     "karma-spec-reporter": "0.0.34",
-    "karma-webpack": "4.0.2",
+    "karma-webpack": "5.0.0",
     "lodash": "4.17.21",
     "lolex": "1.6.0",
     "mini-css-extract-plugin": "1.6.2",
@@ -109,7 +111,7 @@
     "sass-loader": "10.3.1",
     "selenium-server": "2.53.1",
     "semver": "5.7.1",
-    "serviceworker-webpack-plugin": "1.0.1",
+    "serviceworker-webpack5-plugin": "2.0.0",
     "shelljs": "0.8.5",
     "sinon": "2.4.1",
     "sinon-chai": "2.14.0",
@@ -119,7 +121,7 @@
     "url-loader": "4.1.1",
     "vue-loader": "17.0.0",
     "vue-style-loader": "4.1.3",
-    "webpack": "4.46.0",
+    "webpack": "5",
     "webpack-dev-middleware": "3.7.3",
     "webpack-hot-middleware": "2.25.2",
     "webpack-merge": "0.20.0"

src/services/push/push.js

@@ -1,4 +1,4 @@
-import runtime from 'serviceworker-webpack-plugin/lib/runtime'
+import runtime from 'serviceworker-webpack5-plugin/lib/runtime'
 
 function urlBase64ToUint8Array (base64String) {
   const padding = '='.repeat((4 - base64String.length % 4) % 4)