Upgrade vue plugins

[gustav87]

Some of our dependencies are incompatible with node v18. To fix that, we need to upgrade a couple of packages.

[guan@mate website]$ node -v
v18.12.1

[guan@mate website]$ yarn install
yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
error @achrinza/node-ipc@9.2.2: The engine "node" is incompatible with this module. Expected version "8 || 10 || 12 || 14 || 16 || 17". Got "18.12.1"
error Found incompatible module.

Setting node to v17 lets yarn install complete successfully, but yarn serve fails.

[guan@mate website]$ node -v
v17.9.1

[guan@mate website]$ yarn serve
yarn run v1.22.19
$ vue-cli-service serve --mode development
 INFO  Starting development server...
10% building 2/5 modules 3 active ...loader/index.js??ref--14-0!/home/guan/programmingOnDisk/w3champions/website/src/main.tsError: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:135:10)
    at module.exports (/home/guan/programmingOnDisk/w3champions/website/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/guan/programmingOnDisk/w3champions/website/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/guan/programmingOnDisk/w3champions/website/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/guan/programmingOnDisk/w3champions/website/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/guan/programmingOnDisk/w3champions/website/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/guan/programmingOnDisk/w3champions/website/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/guan/programmingOnDisk/w3champions/website/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/home/guan/programmingOnDisk/w3champions/website/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /home/guan/programmingOnDisk/w3champions/website/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at runSyncOrAsync (/home/guan/programmingOnDisk/w3champions/website/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/home/guan/programmingOnDisk/w3champions/website/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/home/guan/programmingOnDisk/w3champions/website/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/guan/programmingOnDisk/w3champions/website/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/guan/programmingOnDisk/w3champions/website/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
node:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:135:10)
    at module.exports (/home/guan/programmingOnDisk/w3champions/website/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/guan/programmingOnDisk/w3champions/website/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/guan/programmingOnDisk/w3champions/website/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/guan/programmingOnDisk/w3champions/website/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/guan/programmingOnDisk/w3champions/website/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/guan/programmingOnDisk/w3champions/website/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/guan/programmingOnDisk/w3champions/website/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/home/guan/programmingOnDisk/w3champions/website/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/guan/programmingOnDisk/w3champions/website/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/guan/programmingOnDisk/w3champions/website/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /home/guan/programmingOnDisk/w3champions/website/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

error Command failed with exit code 1.

this error happens because node v17 increased their security by disallowing some openssl protocols, I think. It is webpack 4 that causes these issues:
webpack/webpack#14532
vuejs/vue-cli#6770

[guan@mate website]$ npm list webpack
third@0.1.0 /home/guan/programmingOnDisk/w3champions/website
├─┬ @vue/cli-plugin-babel@4.5.19
│ ├─┬ babel-loader@8.2.5
│ │ └── webpack@4.46.0 deduped
│ ├─┬ cache-loader@4.1.0
│ │ └── webpack@4.46.0 deduped
│ ├─┬ thread-loader@2.1.3
│ │ └── webpack@4.46.0 deduped
│ └── webpack@4.46.0
├─┬ @vue/cli-plugin-eslint@4.4.6
│ ├─┬ eslint-loader@2.2.1
│ │ └── webpack@4.46.0 deduped
│ └── webpack@4.46.0 deduped
├─┬ @vue/cli-plugin-typescript@4.5.19
│ └── webpack@4.46.0 deduped
├─┬ @vue/cli-service@4.5.19
│ ├─┬ @intervolga/optimize-cssnano-plugin@1.0.6
│ │ └── webpack@4.46.0 deduped
│ ├─┬ @soda/friendly-errors-webpack-plugin@1.8.1
│ │ └── webpack@4.46.0 deduped
│ ├─┬ @vue/preload-webpack-plugin@1.1.2
│ │ └── webpack@4.46.0 deduped
│ ├─┬ copy-webpack-plugin@5.1.2
│ │ └── webpack@4.46.0 deduped
│ ├─┬ css-loader@3.6.0
│ │ └── webpack@4.46.0 deduped
│ ├─┬ file-loader@4.3.0
│ │ └── webpack@4.46.0 deduped
│ ├─┬ html-webpack-plugin@3.2.0
│ │ └── webpack@4.46.0 deduped
│ ├─┬ mini-css-extract-plugin@0.9.0
│ │ └── webpack@4.46.0 deduped
│ ├─┬ terser-webpack-plugin@1.4.5
│ │ └── webpack@4.46.0 deduped
│ ├─┬ url-loader@2.3.0
│ │ └── webpack@4.46.0 deduped
│ ├─┬ vue-loader-v16@npm:vue-loader@16.8.3
│ │ └── webpack@4.46.0 deduped
│ ├─┬ vue-loader@15.10.0
│ │ └── webpack@4.46.0 deduped
│ ├─┬ webpack-dev-server@3.11.3
│ │ ├─┬ webpack-dev-middleware@3.7.3
│ │ │ └── webpack@4.46.0 deduped
│ │ └── webpack@4.46.0 deduped
│ └── webpack@4.46.0 deduped
├─┬ sass-loader@8.0.2
│ └── webpack@4.46.0 deduped
├─┬ vue-cli-plugin-vuetify@2.5.1
│ ├─┬ null-loader@4.0.1
│ │ └── webpack@4.46.0 deduped
│ └── webpack@4.46.0 deduped
└─┬ vuetify-loader@1.9.1
  ├─┬ file-loader@6.2.0
  │ └── webpack@4.46.0 deduped
  └── webpack@4.46.0 deduped

By upgrading Vue plugins, they no longer depend on webpack v4, but v5, in which this is fixed.

The dependency on @achrinza/node-ipc@9.2.2 which only supports node up to v17 is also fixed by upgrading Vue plugins.

[guan@mate website]$ npm list @achrinza/node-ipc
third@0.1.0 /home/guan/programmingOnDisk/w3champions/website
└─┬ @vue/cli-plugin-babel@4.5.19
  └─┬ @vue/cli-shared-utils@4.5.19
    └── @achrinza/node-ipc@9.2.2

[guan@mate website]$ npm list @vue/cli-shared-utils
third@0.1.0 /home/guan/programmingOnDisk/w3champions/website
├─┬ @vue/cli-plugin-babel@4.5.19
│ └── @vue/cli-shared-utils@4.5.19
├─┬ @vue/cli-plugin-eslint@4.4.6
│ └── @vue/cli-shared-utils@4.5.19 deduped
├─┬ @vue/cli-plugin-router@4.5.19
│ └── @vue/cli-shared-utils@4.5.19 deduped
├─┬ @vue/cli-plugin-typescript@4.5.19
│ └── @vue/cli-shared-utils@4.5.19 deduped
└─┬ @vue/cli-service@4.5.19
  └── @vue/cli-shared-utils@4.5.19 deduped

this allows us to use node v18 which is LTS now. v16 is in maintenance mode which ends in September 2023, so it's good to upgrade.

I also removed the dependency on node-sass which is deprecated in favor of sass:
https://stackoverflow.com/questions/71818513/node-sass-version-7-0-1-is-incompatible-with-4-0-0
vuejs/vue-cli#6477

I had to add a rule to eslint because in eslint-plugin-vue v7.0.0, they introduced a new rule for v-slot:
https://eslint.vuejs.org/rules/valid-v-slot.html#options
https://vuetifyjs.com/en/components/data-tables/#slots
https://stackoverflow.com/questions/61344980/v-slot-directive-doesnt-support-any-modifier