Node.js upgrade to v18 along with dependency upgrades and linting fixes

[bjester]

Description

Upgrades Node.js to v18, along with Kolibri-Tools to v0.16, Jest to v29 and Nuxt to v2.15. Additionally, this pins dependencies in order to maintain compatibility between Nuxt and kolibri-tools, applies fixes for new linting errors, and cleans up testing output through better error handling.

Issue addressed

Addresses https://github.com/learningequality/kolibri-design-system/issues/439

Changelog

• Description: Upgrades Node.js to v18, along with Kolibri-Tools to v0.16, Jest to v29 and Nuxt to v2.15

• Products impact: none

• Addresses: #439

• Components: none

• Breaking: no

• Impacts a11y: no

• Guidance: Netlify configuration needs to be updated to use v18 as well

• Description: Component error handling now use @error listener to avoid polluting test output, nor suppressing console.* in tests

• Products impact: any

• Addresses: n/a

• Components: KImg, KTabs, KTabsList

• Breaking: yes

• Impacts a11y: no

• Guidance: The KImg component may now emit an Error object in its @error listener when incorrectly configured, in addition to an UiEvent|Event when an image fails to load. Consumers should type check the value.

Steps to test

1. Run yarn run test
2. Verify tests pass
3. Run yarn run dev
4. Verify documentation

(optional) Implementation notes

At a high level, how did you implement this?

• Upgraded Node.js
• Upgraded dependencies to highest version we could support
• Cleaned up test output throwing warnings and other errors
• Pinned dependency resolutions as needed

Does this introduce any tech-debt items?

Yes https://github.com/learningequality/kolibri-design-system/issues/646

Testing checklist

• [x] Contributor has fully tested the PR manually
• [ ] If there are any front-end changes, before/after screenshots are included
• [x] Critical and brittle code paths are covered by unit tests
• [x] The change is described in the changelog section above

Reviewer guidance

• [x] Is the code clean and well-commented?
• [x] Are there tests for this change?
• [ ] Are all UI components LTR and RTL compliant (if applicable)?
• [ ] Add other things to check for here

After review

• [ ] The changelog item has been pasted to the CHANGELOG.md

Comments

[bjester]

Before I actually update the changelog file, please let me know how my notes look in the PR.

[bjester]

Noting we must update the Node.js version in Netlify before merging

[bjester]

Hmm linting was passing, but now it isn't :thinking: I'll take a look

[MisRob]

Before I actually update the changelog file, please let me know how my notes look in the PR.

Thank you, @bjester, to me it looks well and clear, and I appreciate the guidance

[MisRob]

Hi @bjester, thanks a lot - lots of work!

I've switched to this branch, then nvm use 18, then yarn install, and finally yarn dev. It seems the devserver initialization gets stuck and I can't access http://localhost:4000/ as usual

michaela@michaela:~/dev/kolibri-design-system$ yarn run dev
yarn run v1.22.17
$ npm-run-all --parallel dev-only _lint-watch-fix _api-watch pregenerate
$ yarn lint -w -m
$ chokidar "**/lib/**" -c "node utils/extractApi.js"
$ nuxt --port 4000
$ node utils/pregenerate.js
$ kolibri-tools lint --pattern '**/*.{js,vue,scss,less,css}' --ignore '**/node_modules/**,**/.nuxt/**,**/dist/**,**/lib/KIcon/precompiled-icons/**,**/lib/keen/**,**/docs/environment.js,**/docs/jsdocs.js' -w -m
ℹ  Netlify environment variables:                                     11:44:01
    NETLIFY:        undefined
    BRANCH:         undefined
    PULL_REQUEST:   undefined
    REPOSITORY_URL: undefined
ℹ Wrote environment to /home/michaela/dev/kolibri-design-system/docs/environment.js

 WARN  mode option is deprecated. You can safely remove it from nuxt.config

ℹ Wrote rst icon replacement strings to /home/michaela/dev/kolibri-design-system/docs/rstIconReplacements.txt

ℹ NuxtJS collects completely anonymous data about usage.          11:44:01 AM
  This will help us improve Nuxt developer experience over time.
  Read more on https://git.io/nuxt-telemetry

? Are you interested in participating? (Y/n) Kolibri Linter: Initializing watcher for the following patterns: **/*.{js,vue,scss,less,css}

 WARN  Could not extract docs from /home/michaela/dev/kolibri-design-system/lib/KThemePlugin.js

ℹ Wrote jsdocs to /home/michaela/dev/kolibri-design-system/docs/jsdocs.js
add:node_modules/.bin/acorn
add:node_modules/autoprefixer/node_modules/.bin/browserslist
add:node_modules/bonjour-service/node_modules/.bin/multicast-dns
...
add:node_modules/.bin/webpack-cli
add:node_modules/.bin/webpack-dev-server
Watching "**/lib/**" ..

 WARN  Could not extract docs from /home/michaela/dev/kolibri-design-system/lib/KThemePlugin.js

ℹ Wrote jsdocs to /home/michaela/dev/kolibri-design-system/docs/jsdocs.js

Can you see something problematic in the log above or have some recommendations on how to best proceed with debuggin?

[MisRob]

I wonder if this is related to the problem with the devserver.

yarn generate gives me this error

[MisRob]

Good news is that I could successfully run

• yarn lint
• yarn lint-fix
• yarn lint-watch
• yarn pregenerate
• yarn dev-only
• yarn precompile-svgs
• yarn precompile-custom-svgs
• yarn _lint-watch-fix
• yarn test
• yarn _api-watch

So it is only generate and dev causing trouble. I use Ubuntu.

[MisRob]

@bjester Upgrading yarn to v1.22.22 as discussed helped me with yarn dev that works now. I still see problem with yarn generate. But we can have a look whether that's actually a regression or if it was present before (can try that out but later)

[bjester]

I have replicated @MisRob's issue. It seems to stem from incompatibility with hoisted postcss packages. I will look at fixing it

[MisRob]

I will unassign myself from the asigned reviewer role for now since everything is reviewed at this point. So that I don't block another round of review as I will be away for two weeks, back on July 8. If it's still open when I'm back and I can help, please ping me :)! Thanks.

[AlexVelezLl]

Hi! According to our conversation with @rtibbles. This PR should be retargeted to the develop branch.