Page Load Issues with Multi-Level URLs in Dashboard

[joelvandal]

Current Behavior

When navigating to different pages within the dashboard (e.g., /dashboard/network/lan, /dashboard/network/wan, /dashboard/stats), sometimes the pages do not load and display a blank screen instead.

The issue appears to occur intermittently upon refreshing the pages.

The browser's console indicates a failure to load module scripts with a specific error message: "Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of 'text/html'."

This suggests that the JavaScript files necessary for these pages are not being served correctly.

For instance, when attempting to access http://myserver:1880/dashboard/network/lan, the browser tries to load a JavaScript file from http://myserver:1880/dashboard/network/network/assets/index-D0lzfOAp.js but fails, resulting in a blank page.

Notably, when links are simplified to a single level (e.g., changing /dashboard/network/lan to /dashboard/network_lan), the issue does not occur, and the pages load as expected without the MIME type error or the blank page issue. This observation suggests that the problem may be related to the handling of multi-level URL paths in the system.

Expected Behavior

When any page within the dashboard is refreshed or directly accessed, it should load correctly without displaying a blank screen. Specifically, JavaScript files, such as ./assets/index-D0lzfOAp.js, should be loaded successfully with the correct MIME type.

Additionally, it is crucial that the content served by URLs like http://myserver:1880/dashboard/network/network/assets/index-D0lzfOAp.js should be the correct JavaScript file, not the content of dist/index.html. This ensures that all page elements and functionalities are properly displayed and fully operational as intended.

There should be no requirement to navigate back to the base URL (/dashboard) or to perform a hard refresh to access the content correctly. The system should consistently serve the appropriate content for each specific URL, especially for nested paths in the dashboard, without mixing up the content of JavaScript files and HTML pages.

Steps To Reproduce

Navigate to a specific page on the dashboard, such as http://myserver:1880/dashboard/network/lan.

Refresh the page, either normally or using Ctrl-R.

Observe that the page sometimes loads a blank screen instead of the expected content.

Check the browser's console and note the error regarding the failure to load a module script due to an incorrect MIME type response.

Attempt to navigate directly to the JavaScript file URL (as indicated in the error) and observe the response content type.

Environment

• Dashboard version: 1.6.0
• Node-RED version: 3.0.2
• Node.js version: 14.21.3
• npm version: 6.14.18
• Platform/OS: Ubuntu 20.04
• Browser: Chrome

Have you provided an initial effort estimate for this issue?

I am not a FlowFuse team member