search

sitmun / sitmun-admin-app

Administration application for the SITMUN system.
European Union Public License 1.2
0 stars 1 forks source link

Error process undefined in Administration Application on Fresh Installations of Sitmun Application Stack from Updates Branch #185

Closed fjlopez closed 1 month ago

fjlopez commented 1 month ago

Describe the Bug

In fresh installations of the Sitmun Application Stack from the Updates branch, the error process undefined occurs when opening the administration application. The error process undefined suggests that the application relies on a Node.js-specific global variable (process) that is not available in the browser environment by default.

To Reproduce

Steps to reproduce the behavior:

  1. Clone the project: 
    git clone --branch feature-4 --recurse-submodules https://github.com/sitmun/sitmun-application-stack.git
  2. Navigate to the project directory: 
    cd sitmun-application-stack
  3. Check that the branch Updates of sitmun-admin-app is selected. 
    git submodule status

    Must output a line that contains the string front/admin/sitmun-admin-app (remotes/origin/Updates)

  4. Build the Docker image without using the cache: 
    docker compose build --no-cache
  5. Run the Docker containers: 
    docker compose up -d
  6. Go to http://localhost:9000/admin
  7. Observe that the screen remains blank and there is a JavaScript error process undefined in util.js:109 in the console. 
    ReferenceError: process is not defined
  at 2904 (util.js:109:1)
  at a (bootstrap:19:1)
  at 7500 (resource-array.ts:170:5)
  at a (bootstrap:19:1)
  at index.js:17:1
  at n (jsonp chunk loading:34:1)
  at main.e4d2890a7ee9573e.js:1:61

However, if we add the following content to front/admin/sitmun-admin-app/src/polyfills.ts:

(window as any).process = {
  env: { DEBUG: undefined },
};

And then rebuild and run the application:

docker compose build --no-cache
docker compose up

Upon navigating to http://localhost:9000/admin, the application starts correctly.

Expected Behavior

The application should function without the need to modify the polyfills.ts file.

Environment

Below is described the environment where the application is built. We assume that the cloned source code is in the folder sitmun-admin-app. We use the following Dockerfile:

FROM node:18 AS build-admin-app
RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app
WORKDIR /home/node/app
COPY sitmun-admin-app/package*.json ./
RUN npm install
RUN npm ci
COPY --chown=node:node sitmun-admin-app/*.json admin/sitmun-admin-app/*.js ./
COPY --chown=node:node sitmun-admin-app/src/ ./src/
COPY --chown=node:node environment.testdeployment.ts ./src/environments/environment.testdeployment.ts
RUN npm run build -- --configuration=testdeployment --base-href=/admin/ --source-map=true

where the file environment.testdeployment.ts contains:

export const environment = {
  production: false,
  apiBaseURL: '/backend',
};
fjlopez commented 1 month ago

@albertcoro, I have just fixed a typo in the procedure to reproduce the issue and incremented the level of detail of the description. Have you have reviewed the issue? It's blocking from my opinion.

albertcoro commented 1 month ago

Yes, it now works perfectly. Sorry for not notifying earlier

fjlopez commented 1 month ago

Which commit fixed this? I tested again this morning with the latest version on GitHub, and the problem persists. I wonder if it is possible that your local setup causes it to work well on your machine.

albertcoro commented 1 month ago

My bad! I missed one step of the reproducing phase and it seem like it worked. Did it again and now fails. I'll be looking into it

albertcoro commented 1 month ago

Another thing I just realized is that the backend is not running and might be the culprit of this problem. See atached screen capture. image

fjlopez commented 1 month ago

It is unrelated. As you can see in this screenshot, no request is made to the backend. The app just doesn't run.

Captura de pantalla 2024-07-29 a las 9 39 09
fjlopez commented 1 month ago

Regarding to the problem with the service backend, just delete the volume sitmun-application-stack and restart the service.

fjlopez commented 1 month ago

The process bug has been replicated in SILME on a host Windows machine. Next, I performed research to identify a potential culprit, and this is the most promising lead:

Angular 12 was the first version to include Webpack 5 support, and subsequent versions, including Angular 16, continue to use Webpack 5 as the default bundler for the build process. In previous versions of Webpack, such as Webpack 4, the process variable (along with other Node.js polyfills) was automatically provided.

The original version of the project was Angular 10, and in that version, Webpack 4 provided Node.js polyfills. Therefore, after the upgrade to Angular 12, any direct or indirect call to the util library by SITMUN code or by a third party library should fail unless a polyfill is provided.

albertcoro commented 1 month ago

Okey, I'm gonna change the polyfill and push it

fjlopez commented 1 month ago
fjlopez commented 1 month ago

@albertcoro, I have some doubts about this pull request. My code was provided to highlight the root cause of the bug (missing Node.JS polyfills); it is not necessarily the solution to it. Could you confirm:

Thank you for your attention to these questions.

silmeUsil0001 commented 1 month ago

Hola Javier,

Que sepas que he vuelto a hacer todo el proceso como ayer y a mi también me sigue apareciendo el error del process

Marc Rosés Arbonés Cap Departament SIG - IDE Tlf. +34 971 35 27 10 / Ext 7044 C/Borja Moll, 51 - 07702 - Maó - Illes Balears [ http://www.silme.es/ | www.silme.es ]

Aquest missatge electrònic i qualsevol fitxer adjunt estan dirigits únicament a les adreces indicades. El seu contingut està protegit d'acord amb el Reglament (UE) 2016/679 del Parlament Europeu i del Consell de 27 d’Abril de 2016, i la Llei Orgànica 3/2018 de 5 de desembre de Protecció de Dades de Caràcter Personal i Garanties de Drets Digitals.

El responsable del tractament de les dades personals de la persona destinatària és «Servei d’Informàtica Local de Menorca, S.A.» amb domicili al Carrer Borja Moll, 51, 07702 Menorca, Illes Balears. Aquestes dades són tractades amb la finalitat de gestionar les relacions i comunicacions vinculades a SILME, S.A. Aquestes dades es conservaran mentre siguin útils per a la finalitat indicada, i durant els terminis legals i durant el temps necessari per atendre les possibles responsabilitats que sorgeixin del tractament.

Les persones interessades teniu dret a sol·licitar l’accés a les vostres dades personals, la rectificació, la supressió o la portabilitat d’aquestes dades, la limitació i/o l’oposició al tractament. A tal efecte, podeu posar-vos en contacte amb la Delegada de protecció de dades de SILME, S.A. enviant un correu a @.***

Aquest missatge i els documents adjunts són confidencials. Si no en sou el destinatari, preguem ho informeu al remitent i procediu a eliminar aquesta comunicació, així com els documents adjunts del vostre sistema, sense reproduir-ne ni comunicar-ne els continguts. La transmissió del correu electrònic no garanteix que sigui segur o estigui lliure d’error, de manera que declinam qualsevol responsabilitat en aquest sentit.

De: "Francisco J Lopez-Pellicer" @.> A: "sitmun/sitmun-admin-app" @.> CC: "Subscribed" @.***> Enviats: Dimarts, 30 Juliol de 2024 11:57:53 Assumpte: Re: [sitmun/sitmun-admin-app] Error process undefined in Administration Application on Fresh Installations of Sitmun Application Stack from Updates Branch (Issue #185)

[ https://github.com/albertcoro | @albertcoro ] , I have some doubts about [ https://github.com/sitmun/sitmun-admin-app/pull/186 | this pull request ] . My code was provided to highlight the root cause of the issue (missing Node polyfills); it is not necessarily the solution to it. Could you confirm: 

* Have you been able to reproduce the bug on your machine? 
* Have you identified which commit or merge introduced this bug? 
* Why does sitmun-admin-app (a browser application) use Node.JS modules?

Thank you for your attention to these questions.

— Reply to this email directly, [ https://github.com/sitmun/sitmun-admin-app/issues/185#issuecomment-2257957869 | view it on GitHub ] , or [ https://github.com/notifications/unsubscribe-auth/ABR3NA6LGCYFVWDYVZRWNK3ZO5PSDAVCNFSM6AAAAABLOWFYX2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENJXHE2TOOBWHE | unsubscribe ] . You are receiving this because you are subscribed to this thread. Message ID: @.***>

fjlopez commented 1 month ago

@silmeUsil0001 I just updated sitmun-application-stack to include this last update. If you follow the procedure again it will work. However, the UI is a bit broken. @albertcoro this is unrelated to this issue, isn't?

Captura de pantalla 2024-07-30 a las 12 31 13 Captura de pantalla 2024-07-30 a las 12 32 47
albertcoro commented 1 month ago

yes, I was currently documenting it

albertcoro commented 1 month ago

Have you been able to reproduce the bug on your machine? Yes Have you identified which commit or merge introduced this bug? No, but I imagine that it has to be when upgrading from version 12 of angular as you said Why does sitmun-admin-app (a browser application) use Node.JS modules? I'm unsure as I'm not the one who build this app

As extra, I have found that when you fix the issue with the polyfill. You find a new issue, documented below:

How to reproduce it?

git clone --branch feature-4 --recurse-submodules https://github.com/sitmun/sitmun-application-stack.git

cd sitmun-application-stack

git submodule status

Must output a line that contains the string front/admin/sitmun-admin-app (remotes/origin/Updates)

docker compose build --no-cache

docker compose up -d

Errors:

In the console tab, in the developers tools of the browser, we can see that the problems seems to be realted to ag-grid

image

fjlopez commented 1 month ago

This is strange. According to https://www.ag-grid.com/javascript-data-grid/row-models/, 'clientSide' is part of AG Grid Community.