Cannot register Formatter (ProgressBarFormatter)

[sapster77]

Trying to register a ProgressBarFormatter in order to format a column (type double) as a progressbar, but when I open the particular page i get an "Could not find ProgressBarFormatter class" error (see below). I dont understand why, as i have other formatters that work fine.
Serene version 6.9.6.
My code:
ProgressBarFormatter.ts (placed next to qualColumns.cs in the /modules/Settings/Qual folder which is where the formatter is to used)

`import { Decorators, Formatter, format } from "@serenity-is/corelib";
import { FormatterContext } from "@serenity-is/sleekgrid";
import { QualRow } from "@/ServerTypes/Settings/QualRow";


@Decorators.registerFormatter('FASTNET.ProgressBarFormatter')
export class ProgressBarFormatter implements Formatter {
    format(ctx: FormatterContext<any>): string {
        const percent: Number = ctx.value * 100;
        // add some colors
        let klass: String;
        if (percent >= 0 && percent <= 25)
            klass = "bg-success";
        else if (percent > 25 && percent <= 50)
            klass = "bg-info";
        else if (percent > 50 && percent <= 75)
            klass = "bg-warning";
        else
            klass = "bg-danger";

        return format(`<div class="progress" role="progressbar" aria-label="{1}" aria-valuenow="{0}" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar {2}" style="width: {0}%">{0} %</div>
</div>`, percent, ctx.value, klass);
    }
}`

QualColumns.cs
[ProgressBarFormatter] public double TotalsFactor { get; set; }

The error:

I have transformed/built restarted etc. Still the same. Also tried changing the @decorators.registerformatter path to FASTNET.Settings.ProgressBarFormatter. No luck.

Any ideas from anyone? I am a little stuck:-)

[LSNicholls]

See additional answer in #6778

[sapster77]

Problem solved:
For others running into this - this thread is the key #6763
I have been using 2 different computers (1 intel Win10 and 1 Windows 11 ARM) synching the solution through github. The esbuild in your solution "node_modules" folder is generated specifically for your operating system specifics. Node.js and esbuild module are specifically used to generate the js for the formatter. As I was working on a computer with a "broken" esbuild the above issue was caused.
Fix was to reinstall node.js and npm (most importantly npm).
Hope this helps someone:-)

[LSNicholls]

synching the solution through girhub

but ... the full contents of node_modules folder not be coming across from github, because node_modules should be in your .gitignore file, right? Along with wwwroot/esm?

So the problem is that you had installed node.js and npm locally in the project and they came over (in the wrong versions)? (I don't even know how to do that...) Or did you do the global install of node.js on the ARM computer but picked the wrong installer on this page https://nodejs.org/en/download/prebuilt-installer? Just trying to understand -- I am new to all these framework dependencies and am trying to write up some instructions for other developers.

Thanks for sharing this!!

[sapster77]

So I am really on thin ice here....
I made no changes to my .gitignore and I guess those should be in there by default as you mention.
My "workflow" was this:
-Started project on Win10 computer (intel).
-Clone solution to Win11 ARM computer (using visual studio).
-UI not working properly (dotnet sergen g not able to generate new rows - generated correctly but displayed wrong).
-Realisze new computer did not have node.js installed => install it (globel install - correct installer).
-Work on project from both computers until above error occurred. Delete node_modules and reinstall NPM worked.

I really don't know where in above flow something went wrong.

[LSNicholls]

I guess those should be in there by default as you mention.

Well, maybe. If this project started a long time ago, maybe these lines weren't there earlier?

Besides, while we could trust .gitignore to handle this, you should be able to browser the git repo and see whether they are checked in or omitted.

If it's working now, but git repo shows node_modules files, it will probably continue to work, unless you update the project on your Win 10 intel computer, bringing down the node_modules files that are in git.

Not that you need to do that as a test -- it is just my working theory about what might have gone wrong.