Live Monitoring map is not displaying polygons in blue and red over the buildings when building/deploying

[emi420]

Describe the bug
The map in the Live Monitoring view is displaying objects when running the front end for development with yarn start but is not working good when I build it, and the same is happening on the deployment to the staging server (https://tasks-stage.hotosm.org/)

To Reproduce
Steps to reproduce the behavior:

1. Go to https://tasks-stage.hotosm.org/
2. Log in
3. Search for "bangladesh", "ecuador" , "morocco", "nigeria" or "malawi"
4. Open the project
5. Scroll down to see the "Live monitoring" button and click it
6. Click on a result on the right bar
7. The map at the right should display polygons, but is not working, only the OSM background tiles are displayed.

Expected behavior
The map should display polygons in blue and red over the buildings, instead of displaying only the OSM background.

Screenshots

It look like this:

Expected behavior:

Desktop (please complete the following information):

• OS: MacOS 14.2.1
• Browser: Firefox
• Version: 126.0.1

Additional context
It works OK when running the project locally with yarn dev, but it fails when building it with yarn build.

[emi420]

Update: it seems to be working with NPM but not with Yarn.

[emi420]

It's working when re-installing packages and using Node 18, like in the following branch:

https://github.com/hotosm/tasking-manager/tree/fix/liveMonitoringViewMap

Note: I had to set up an env variable to make the build work

export NODE_OPTIONS=--openssl-legacy-provider

[ramyaragupathy]

fixed through #6401