SI: Vue 3 Attempts to load JavaScript file from wrong location when using Vue Router lazy loading.

[BillyShelton]

Sponsorship

If this request requires additional support (e.g., such as direct email/phone/meeting/development), I have the following interest in helping to sponsor the effort via GitHub Sponsors:

• None, please continue to work for me for free :P
• Absolutely, I get value out of this!
• Maybe later
• I'm already a sponsor... Woot!

Describe the bug

When using the Vue Router lazy loading feature (https://router.vuejs.org/guide/advanced/lazy-loading.html) the module tries to load the JavaScript from the wrong URL.

Given a router.js file like

when a <RouterLink> to the ItemDetail route on the HomeItem component is clicked the application tries to load a JavaScript chuck from /js/src_component_ItemDetail_vue.js.

The component chuck is correctly created in the build process and stored in the correct location /DesktopModules/<modulename>/scripts/client-app/js/src_component_ItemDetail_vue.js.

Software Versions

• DNN: 09.13.01 (0)
• Visual Studio: 2022

To Reproduce

Steps to reproduce the behavior:

1. Create simple "details" component
2. Add a route to the router.js file to the component. Something the description above.
3. Add a <RouterLink> to the HomeItem component that links to the new component.
4. Follow the link from the main page.
5. See the browser developer networking tab or console for error.

Expected behavior

I expect the application to properly load the JavaScript chuck and display the ItemDetail component.

Actual behavior

Does not load because the request returns a 404 as it is using the incorrect URL.

Screenshots

Error log

ChunkLoadError: Loading chunk src_components_ItemDetails_vue failed. vue-router.mjs:3256

Additional context

Add any other context about the problem here.