Migrate/upgrade deprecated ui packages

[loleg]

We are having build issues preventing continued development of the frontend, with errors related to several deprecated UI libraries.

The main issue is with node-sass. On the project's GitHub page it says quite clearly that it is no longer actively maintained:

Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.

Upgrade list

• Replace node-sass with Dart Sass
• Upgrade to Popper v2 @popperjs/core
• Replace vis with github.com/visjs
• Replace babel-eslint with @babel/eslint-parser
• Replace vue-headful with vue-meta
• Look for alternative to vue-headful
• Upgrade @vue/cli-service
• Upgrade @vue/cli-plugin-babel
• Upgrade @vue/cli-plugin-eslint
• Upgrade @vue/cli-plugin-e2e-cypress
• Upgrade vuex-persist
• Upgrade watchpack
• Upgrade web3 / web3-eth

[loleg]

As discussed today with @Javany fixing at least the first deprecation this should lift our blockers in CI from current PRs. However, there is still some work required to fix the dozens of SASS warnings.

[loleg]

Those warnings were just the tip of the iceberg, I am still working on 44 build errors, including this one I'm having a hard time tracking down a fix for:

 error  in ../node_modules/vue-pdf/node_modules/pdfjs-dist/lib/web/pdf_link_service.js

Module parse failed: Unexpected token (341:31)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   _cachedPageNumber(pageRef) {
|     const refStr = pageRef.gen === 0 ? `${pageRef.num}R` : `${pageRef.num}R${pageRef.gen}`;
>     return this._pagesRefCache?.[refStr] || null;
|   }
| 

 @ ../node_modules/vue-pdf/src/pdfjsWrapper.js 2:0-69 252:25-39
 @ ../node_modules/cache-loader/dist/cjs.js??ref--13-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib!../node_modules/cache-loader/dist/cjs.js??ref--1-0!../node_modules/vue-loader/lib??vue-loader-options!../node_modules/vue-pdf/src/vuePdfNoSss.vue?vue&type=script&lang=js&
 @ ../node_modules/vue-pdf/src/vuePdfNoSss.vue?vue&type=script&lang=js&
 @ ../node_modules/vue-pdf/src/vuePdfNoSss.vue
 @ ../node_modules/cache-loader/dist/cjs.js??ref--13-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib!../node_modules/cache-loader/dist/cjs.js??ref--1-0!../node_modules/vue-loader/lib??vue-loader-options!./src/components/document/PdfPreview.vue?vue&type=script&lang=js&
 @ ./src/components/document/PdfPreview.vue?vue&type=script&lang=js&
 @ ./src/components/document/PdfPreview.vue
 @ ../node_modules/cache-loader/dist/cjs.js??ref--13-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib!../node_modules/cache-loader/dist/cjs.js??ref--1-0!../node_modules/vue-loader/lib??vue-loader-options!./src/views/DocumentViewer.vue?vue&type=script&lang=js&
 @ ./src/views/DocumentViewer.vue?vue&type=script&lang=js&
 @ ./src/views/DocumentViewer.vue
 @ ./src/router/user.js
 @ ./src/user.js
 @ multi ./src/user.js

Possible solutions discussed here and here. I have already tried adding webpack, babel rules, various versions of the module. I might need to raise an issue in vue-pdf if I don't get any further.

[loleg]

The problem above was solved by switching to the standard npm package of vue.pdf. See also webpack instructions.

[loleg]

Could this be a link to #292 ?

[loleg]

Let's switch to Node 20 first, update the library, see how the project is working. Linked to #366

[loleg]

See also #307

[loleg]

Progress is being made in #452