Not rendering properly when refreshing on a page

[sedna16]

Hi Frank,

Here's the situation, everything is working good when loading from "/" and clicking some router-link.
But when loading or refreshing from a page like "/settings/", some of the components are not loaded.
When reloading, only the index.html is render and not the components.

Also theres a lot of of errors pointing to included js files.
Uncaught SyntaxError: Unexpected token '<'

here's what i have coded
---index.html---
`

<navbar></navbar>

<!-- Page Body Start-->
<div class="page-body-wrapper horizontal-menu">
    
    <sidebar position='dashboard'></sidebar>

    <div class="page-body">
        listened emit here
        <router-view></router-view>
    </div>
</div>

<script> const BASE_URL = '/apps/vue/appjs' const { createRouter, createWebHistory } = VueRouter const { createApp } = Vue const { loadModule } = window['vue3-sfc-loader'] const load_options = { moduleCache: { vue: Vue, axios: axios, router: VueRouter, }, async getFile(url) { const res = await fetch(url); if ( !res.ok ) throw Object.assign(new Error(res.statusText + ' ' + url), { res }); return { getContentData: asBinary => asBinary ? res.arrayBuffer() : res.text(), } }, addStyle(textContent) { const style = Object.assign(document.createElement('style'), { textContent }); const ref = document.head.getElementsByTagName('style')[0] || null; document.head.insertBefore(style, ref); }, } </script> <script src="app.js"></script>`

---app.js---
`const error404 = Vue.defineAsyncComponent( () => loadModule(BASE_URL + '/views/404.vue', load_options) )
const Dashboard = Vue.defineAsyncComponent( () => loadModule(BASE_URL + '/views/dashboard.vue', load_options) )
const Settings = Vue.defineAsyncComponent( () => loadModule(BASE_URL + '/views/settings.vue', load_options) )

const router = createRouter({
//mode: 'history',
history: createWebHistory(),
routes: [
{
path: "/:catchAll(.*)",
name: 'error404',
component: error404,
},
{
path: BASE_URL + '/',
name: 'dashboard',
component: Dashboard,
},
{
path: BASE_URL + '/settings/',
name: 'settings',
component: Settings,
},
],
})

/*
*
*
*
*
*
*/
const app = createApp({
data() {
return {
sidebar: null,
}
},

components: {
    'navbar': Navbar,
    'sidebar': Sidebar,
},
mounted() {
    //console.log(this.sidebar)
},

})

/*
*
*
*
*
*
*/
app.use(router)
app.mount('#id_app')`

[sedna16]

I managed to fix that issue from above, and managed to make it work.
I had to use absolute urls for the js dependencies

But when I tried to open the project today, this error in console came up.

"Uncaught (in promise) SyntaxError: Unexpected token, expected "," (57:8) (at index.js:816:17)"

[BoxiTon]

i also meet this question. and i found this is @babel/parser not support typescript .

you can add

`// @ts-ignore (Could not find a declaration file for module '@babel/plugin-transform-typescript')

import babelPluginTransformTypescript from '@babel/plugin-transform-typescript';`

add plugin to support typescript.

[sedna16]

nvm this, its just me being dumb