Update everything to work with node 16.X

.drone.yml

@@ -3,12 +3,12 @@ name: default
 
 steps:
 - name: prepare-workdir
-  image: alpine:3.13.1
+  image: alpine:3.14.3
   commands:
   - mkdir canapeapp
 
 - name: frontend
-  image: node:13.8.0
+  image: node:16.6.2
   commands:
   - cd frontend
   - npm install
@@ -16,7 +16,7 @@ steps:
   - npm run-script build
 
 - name: backend
-  image: golang:1.15.7-alpine3.13
+  image: golang:1.16.7-alpine3.14
   commands:
   - apk --no-cache add git
   - GO111MODULE=off go get -tags 'postgres' -u github.com/golang-migrate/migrate/cmd/migrate
@@ -24,7 +24,7 @@ steps:
   - CGO_ENABLED=0 go build -ldflags '-extldflags "-static"' -trimpath -v -o canapeapp/app backend/*.go
 
 - name: prepare-docker
-  image: alpine:3.13.1
+  image: alpine:3.14.3
   commands:
   - cp docker/run.sh canapeapp/run.sh
   - cp migrate canapeapp/migrate

frontend/js/app.js

@@ -14,7 +14,12 @@ import "../scss/app.scss";
 import React from "react";
 import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
-import { Router, Route, Switch, Redirect } from "react-router-dom";
+import {
+  HashRouter as Router,
+  Route,
+  Switch,
+  Redirect,
+} from "react-router-dom";
 import Container from "react-bootstrap/Container";
 
 // Auth

frontend/package.json

@@ -1,64 +1,62 @@
 {
     "name": "canape",
     "scripts": {
-        "start": "NODE_ENV=development ./node_modules/webpack/bin/webpack.js -d --progress --colors --watch",
-        "build": "NODE_ENV=production  ./node_modules/webpack/bin/webpack.js -p --progress --colors",
-        "lint": "./node_modules/eslint/bin/eslint.js js"
+        "start": "NODE_ENV=development npx webpack --progress --color --watch",
+        "build": "NODE_ENV=production  npx webpack --progress --color",
+        "lint": "npx eslint js"
     },
     "dependencies": {
         "bootstrap": "^4.4.1",
         "bootswatch": "^4.4.1",
         "font-awesome": "^4.7.0",
         "fuzzy": "^0.1.3",
-        "history": "^4.9.0",
-        "immer": "^6.0.3",
-        "jquery": "^3.4.1",
-        "jwt-decode": "^2.1.0",
-        "moment": "^2.20.1",
+        "history": "^5.0.0",
+        "immer": "^9.0.5",
+        "jquery": "^3.6.0",
+        "jwt-decode": "^3.1.2",
+        "moment": "^2.29.1",
         "popper.js": "^1.15.0",
-        "prop-types": "^15.6.0",
-        "react": "^16.13.1",
-        "react-bootstrap": "^1.0.0",
-        "react-bootstrap-sweetalert": "^5.1.9",
-        "react-bootstrap-toggle": "^2.2.6",
-        "react-dom": "^16.13.1",
-        "react-infinite-scroll-component": "^5.0.4",
+        "prop-types": "^15.7.2",
+        "react": "^17.0.2",
+        "react-bootstrap": "^1.6.1",
+        "react-bootstrap-sweetalert": "^5.2.0",
+        "react-bootstrap-toggle": "^2.3.2",
+        "react-dom": "^17.0.2",
+        "react-infinite-scroll-component": "^6.1.0",
         "react-loading": "2.0.3",
-        "react-redux": "^7.2.0",
+        "react-redux": "^7.2.4",
         "react-router-bootstrap": "^0.25.0",
-        "react-router-dom": "^5.1.2",
-        "redux": "^4.0.5",
+        "react-router-dom": "^5.2.0",
+        "redux": "^4.1.1",
         "redux-logger": "^3.0.6",
         "redux-thunk": "^2.3.0",
-        "ua-parser-js": "^0.7.17"
+        "ua-parser-js": "^0.7.28"
     },
     "devDependencies": {
-        "@babel/core": "^7.9.0",
-        "@babel/preset-env": "^7.9.0",
-        "@babel/preset-react": "^7.9.4",
-        "autoprefixer": "^9.7.5",
-        "axios": "^0.19.2",
+        "@babel/core": "^7.15.0",
+        "@babel/preset-env": "^7.15.0",
+        "@babel/preset-react": "^7.14.5",
+        "autoprefixer": "^10.3.1",
+        "axios": "^0.21.1",
         "babel-eslint": "^10.1.0",
-        "babel-loader": "^8.1.0",
+        "babel-loader": "^8.2.2",
         "clean-webpack-plugin": "^3.0.0",
-        "css-loader": "^3.4.2",
-        "eslint": "^6.8.0",
-        "eslint-config-prettier": "^6.10.1",
-        "eslint-plugin-import": "^2.20.2",
-        "eslint-plugin-prettier": "^3.1.2",
-        "eslint-plugin-react": "^7.19.0",
-        "eslint-plugin-react-hooks": "^2.5.1",
-        "file-loader": "^5.1.0",
-        "html-webpack-plugin": "^3.2.0",
-        "node-sass": "^4.12.0",
-        "postcss-loader": "^3.0.0",
-        "prettier": "^2.0.2",
-        "sass-loader": "^8.0.2",
-        "style-loader": "^1.1.3",
-        "universal-cookie": "^4.0.3",
-        "url-loader": "^3.0.0",
-        "webpack": "^4.42.1",
-        "webpack-cli": "^3.3.11",
-        "webpack-pwa-manifest": "^4.0.0"
+        "css-loader": "^6.2.0",
+        "eslint": "^7.32.0",
+        "eslint-config-prettier": "^8.3.0",
+        "eslint-plugin-import": "^2.24.0",
+        "eslint-plugin-prettier": "^3.4.0",
+        "eslint-plugin-react": "^7.24.0",
+        "eslint-plugin-react-hooks": "^4.2.0",
+        "html-webpack-plugin": "^5.3.2",
+        "postcss-loader": "^6.1.1",
+        "prettier": "^2.3.2",
+        "sass": "^1.37.5",
+        "sass-loader": "^12.1.0",
+        "style-loader": "^3.2.1",
+        "universal-cookie": "^4.0.4",
+        "webpack": "^5.50.0",
+        "webpack-cli": "^4.7.2",
+        "webpack-pwa-manifest": "^4.3.0"
     }
 }

frontend/webpack.config.js

@@ -20,19 +20,9 @@ const config = {
   output: {
     path: BUILD_DIR,
     filename: "[contenthash]-app.js",
+    assetModuleFilename: "[hash]-[name][ext][query]",
   },
-  optimization: {
-    runtimeChunk: "single",
-    splitChunks: {
-      cacheGroups: {
-        vendor: {
-          test: /[\\/]node_modules[\\/]/,
-          name: "vendors",
-          chunks: "all",
-        },
-      },
-    },
-  },
+  optimization: {},
   module: {
     rules: [
       {
@@ -51,15 +41,15 @@ const config = {
       },
       {
         test: /\.(png|jpg|svg|ico)$/,
-        use: ["file-loader?name=[hash]-[name].[ext]"],
+        type: "asset/resource",
       },
       {
         test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        use: ["url-loader?limit=10000&mimetype=application/font-woff"],
+        type: "asset",
       },
       {
         test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        use: ["file-loader"],
+        type: "asset",
       },
     ],
   },
@@ -67,7 +57,6 @@ const config = {
     new webpack.DefinePlugin({
       "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
     }),
-    new webpack.HashedModuleIdsPlugin(),
     new CleanWebpackPlugin({
       cleanOnceBeforeBuildPatterns: ["**/*", "!img/**/*", "!img"],
     }),
@@ -87,6 +76,7 @@ const config = {
       theme_color: "#4e5d6c", // eslint-disable-line camelcase
       display: "standalone",
       orientation: "omit",
+      publicPath: "/",
       scope: "/",
       start_url: "/", // eslint-disable-line camelcase
       icons: [
@@ -105,7 +95,7 @@ const config = {
   resolve: {
     extensions: [".js"],
   },
-  devtool: mode === "production" ? "source-map" : "inline-source-map",
+  devtool: mode === "production" ? false : "source-map",
 };
 
 module.exports = config;