naugehyde - Server code has gotten cruftyThe ...
Server code has gotten crufty
The server code base, especially as UI is concerned, has gotten crufty. The React version SK relies on (16.13.1) is two major revisions behind, react-jsonschema-forms the package underlying the plugin config page is deprecated, Typescript 4 is coming up on its 5th birthday, and the maximum reliable node version for SK (node 18) is 4 major revisions behind.
Been experimenting with trying to get a more up to date react-jsonschema-forms implementation into SK which meant updating react to V18 which in turn required node v20 which in turn required TypeScript 5.x which in turn required updating just about every other package to their latest revision . Took some tweaking but mostly, it works. At least, so far. Further testing and tweaking is of course, necessary. There were some code changes (mostly in the courses API) to get SK to build. and there's a host of warnings from sass/scss/css. But it's an encouraging start that provides a baseline for an more up to date SignalK which will be less vulnerable to deprecated, incompatibile and unsupported packages. Is there a roadmap for updating core packages and core plugins to more recent support packages and node versions? Has anyone else done any work on this to date? Should the work on an updated SK be done in a branch on the Server repository or should it be done in a new repo (like Signalk-Next)? Who wants to contribute? The effort will take coders, builders and testers. One person performing all these functions is not ideal.
Been experimenting with trying to get a more up to date react-jsonschema-forms implementation into SK which meant updating react to V18 which in turn required node v20 which in turn required TypeScript 5.x which in turn required updating just about every other package to their latest revision . Took some tweaking but mostly, it works. At least, so far. Further testing and tweaking is of course, necessary. There were some code changes (mostly in the courses API) to get SK to build. and there's a host of warnings from sass/scss/css. But it's an encouraging start that provides a baseline for an more up to date SignalK which will be less vulnerable to deprecated, incompatibile and unsupported packages. Is there a roadmap for updating core packages and core plugins to more recent support packages and node versions? Has anyone else done any work on this to date? Should the work on an updated SK be done in a branch on the Server repository or should it be done in a new repo (like Signalk-Next)? Who wants to contribute? The effort will take coders, builders and testers. One person performing all these functions is not ideal.
27 Replies
@Karl-Erik Gustafsson just recently started with node 22 at https://github.com/SignalK/signalk-server/pull/1826/files
GitHub
feature: ubuntu 24.04 and node22 for docker image by KEGustafsson ·...
Content
Upgrades to two major components for docker images
Ubuntu 24.04 LTS base image
Node upgrade from 20.x LTS to 22.x LTS
I know this is big change and will need lot of further testing.
Notes...
Normal development flow: fork branch pull request, then discuss and amend
Do it in pieces: admin ui is decoupled from server runtime (except they use the same node for build? Not sure off the top of my head)
Getting everything up to date would be great - then again what do we want/need to build once we are up to date?
We can publish beta versions of the server once we deem it stable enough and ask people here to test it out
Earlier we have updated to newer nodes at a pretty sluggish pace - the server proper has been workinf over a pretty large version range, but details like serialport upgrades have caused a bit of trouble
And getting people to upgrade their node versions in an orderly fashion is not straightforwars at all…- a reasin to prefer containers, but can’t change history and all the installations out there
But 👍👍👍 already at this stage!
React and it's dependencies not withstanding, I have been using and building the server with node v22 successfully for sometime.
I'm going to assume that the course API issues are related to the bump in typescript version not the node version given it was developed using node v22.
Agree with updating components in a modular manner and publishing beta versions for testing.
Longer term moving to a container deployment would ease a lot of these issues.
Container deployment is easying development already and seeing this more and more important to keep variations as small/controlled as possible.
Server-admin-ui is relying some old and not supported components. To update this part of the SK is major job, but doable for sure.
As said there is PR to upgrade both OS and Node at same time for docker, to 24.04 and v22. As Adrian said, everything working fine, but ofcource some new deprecation are & will be introduced Neverending story...
I did some updates to server-admin-ui and react-jsonschema-form-bs4 to remove deprecation warning some couple of years ago. Tried to upgrade to Bootstrap 4 & 5 too, but that was way too complicated to me (maintain same look as previously).
Anyway, willing to help and seeing this longer term project 👍
Making my way through a bunch of errors and warnings now in updating server-admin-ui to React 18. Doable for sure!
Would you like to share your work as a PR (e.g. WIP)?
Yes. Once I get the UI views and components minimally functional with the latest React.
An updated json-schema-forms component will pay dividends. Almost all plug-ins rely on it and the one in the source tree is deprecated, on its way to being no longer supported.
Most probably best would be to upgrade to Bootstrap 5. But then you need to tweak UI too.
In case minimum work, upgraded to jsonschena might viable too.
Feel free to use and PR are OK too.
https://github.com/KEGustafsson/react-jsonschema-form-bs4
in the middle of upgrading bs to 5 right now. not my area of expertise, though. and it shows. the ui isn't coming up at all at the moment!
not even sure how to interactively debug the ui. been following the tutorials online but with no success yet.
sounds like it is snowballing...
Sounds very familiar. Not so straight forward job.
proceeding with smaller steps: from node-sass to sass https://github.com/SignalK/signalk-server/pull/1835
Small and steady makes sense. The React 18 update is monolithic no matter what it seems.
rimraf and glob which are I think only dev dependencies are a tangled mess
if you have all of this (ts, node, react, bootstrap) in a single branch this is going to be...interesting
i decided to peek into getting typescript up to date, here's what i came up with (includes rmfr vs rimraf fix) https://github.com/SignalK/signalk-server/pull/1836
GitHub
chore: update typescript by tkurki · Pull Request #1836 · SignalK/s...
Update typescript and related utilities to ts 5.6.x.
Fix related lint & typing errors that came up with the update.
Fix minor bug in setting numerical settings from the UI.
Use path.join in...
if by interesting you mean blank UI screens, things have already got interesting!
All that stands between you and typescript 5.7.x is typedoc which has support for 5.7.x in beta
@Teppo Kurki when I upgraded my source ts 5 I encountered "require" errors at runtime. the solution, a stopgap, was to run node with --experimental-require-module
re: ts version - i care about not falling too far behind, much less about being at exactly the latest minor version
can you elaborate on this? tests now pass in my ts update branch. i don't see how updating ts alone wouldd result in cjs/esm loading issues that would be solved by --experimental-require-module
false alarm. just tried it w/o the experimental flag and now I'm not getting the error.
don't have a good audit trail so I don't know what exact set of packages / ts config params brought on the Err_require_ESM but it's not there now.
the experimental flag turned out to be not just a stopgap but redundant. guessing the error won't show up again but will let you know if it does.
@Karl-Erik Gustafsson @Teppo Kurki There's a react18 branch (branched off of ts-update) available at https://github.com/naugehyde/signalk-server-nextgen.
It builds and runs but you'll get a react WSOD (white screen of death) when bringing up the UI in a browser.
The problem appears to be somewhere between the UI code and react-router-dom package.
The error reported by the browser is https://react.dev/errors/130?invariant=130&args%5B%5D=undefined&args%5B%5D=
I've tried various router-dom package versions (5.x, 6.x, 7.x). None of which quite work. Currently at 5.3.4.
I'm out of my depth with React (new to it) so if either of you have a clue as to what's causing the error, have at it or let me know what I need to do. Online advice has proved, so far, minimally useful.
Thank you!
An answer to a SO post query suggests wrapping the component imports in {} and exporting by name rather than default.
https://stackoverflow.com/questions/50428339/error-minified-react-error-130
@naugehyde I try look your branch more in detail during weekend.
@Karl-Erik Gustafsson it's up to date with bootstrap 5.3.3 and an updated scss tree.
fails with a different error now:
react-dom.production.min.js:188 Error: [te] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
@Karl-Erik Gustafsson Still tinkering. Ignore previous error reports. With latest react-router package and a few small code changes, the UI loads with the following app errors (an improvement, I think, over React errors):
@Karl-Erik Gustafsson at this point I'm betting that we'll need to upgrade to CoreUI's latest React package to get things working. @Karl-Erik Gustafsson @Teppo Kurki Latest commit is pretty far along- UI shows up now. Up to date with all the latest React 18, Bootstrap 5.3.3 and the latest jsonschema-form packages. Problems: 1) multiple style sheet issues (are they even loading?) 2) src/Containers/Full-> loginOrOriginal() breaks the UI and needs to be fixed 3) there were multiple problems with Component classes and their props property. put a "?" property accessor to get around them but it's just a band-aid. 4) plugin config pages are not opening -- guessing that's a style sheet issue. haven't investigated. 5) installed the bootstrap 5 scss directory but that's a temporary solution just to get the UI up and running. no idea what's needed and where (or how) to look for problems. Take a look when you can. Any input or advice will be appreciated. But the UI is functioning -- which is a lot better than before this weekend. Looks like there's a path forward!
@Karl-Erik Gustafsson at this point I'm betting that we'll need to upgrade to CoreUI's latest React package to get things working. @Karl-Erik Gustafsson @Teppo Kurki Latest commit is pretty far along- UI shows up now. Up to date with all the latest React 18, Bootstrap 5.3.3 and the latest jsonschema-form packages. Problems: 1) multiple style sheet issues (are they even loading?) 2) src/Containers/Full-> loginOrOriginal() breaks the UI and needs to be fixed 3) there were multiple problems with Component classes and their props property. put a "?" property accessor to get around them but it's just a band-aid. 4) plugin config pages are not opening -- guessing that's a style sheet issue. haven't investigated. 5) installed the bootstrap 5 scss directory but that's a temporary solution just to get the UI up and running. no idea what's needed and where (or how) to look for problems. Take a look when you can. Any input or advice will be appreciated. But the UI is functioning -- which is a lot better than before this weekend. Looks like there's a path forward!
so who should do what next?
Funny you should ask! As of an hour ago, there's a new commit on my signalk-server-nextgen github.
The state of the build is:
After lots of trial and error, solved the loginOrOriginal() problems so most of the UI is functioning. I think logging needs work still though.
Most of the ongoing issues appear to be stylesheet related.
Plugin configs now work. Tested a custom config with Calibration and it appears to be good.
In the meantime, React 19.0.0 was released. Tested it but it breaks the DataBrowser so that will have to be looked at (problem is somewhere in the WebSocket logic-- handleMessage() isn't getting called)
I'm not a style sheet guy. I hacked away at Sidebar to get it to where it is but I think someone with more experience should be dealing with it.
Also, there's a host of deprecation notices (most dev dependencies) that someone probably ought to look at (see below)
See attached for deprecation notices.
Do you have a reason not to open a draft pull request?
Only that I've never done one before!
FYI I put coding aside for like 20 years and picked it up again only recently so I'm relatively new to a lot of the tools.
@Teppo Kurki Created a draft pull request just not sure that I did it correctly.
Sorry, not been very active here. One notice that old react-jsonschema-form-bs4 seems to be still on package list. Is that somehow still needed with current setup?
Not needed anymore. Feel free to remove it.
FYI Style sheets are causing some havoc. But the admin screen largely works. Server log being the most notable exception.