Laravel Vue3 and Vite Rollups - Fails dynamic imports

Question

I've been spending some time rewriting an application to Laravel 9 with Inertia, Vite, Vue3 Composition API, and Typescript.

Everything went good and when I tested the production build on my local environment by running npm run build everything bundled up for production and looked fine.

Now I've launched the new codebase, and half of the web page is not working.. why is that? Because Vite can't resolve my dynamic imports.

I don't get the difference between npm run build on my local (which works) from the live site npm run build... I know npm run dev uses es6bundling while the npm run build uses rollup.

I have a very basic setup like this, currentHeader is the dynamic component:

<template>
    <component
        :is="currentHeader"
    />
</template>

I've tried several different approaches, but nothing works. It only works when I hardcode the string path which prevents me from making it dynamic

1 - I changed all my paths from using @/ to using direct paths

2 - I Tried to add the path of the dynamic import to the vite.config.js

build: {
    rollupOptions: {
        external: [
            "./components/HeaderStandard.vue",
            "resources/js/Components/BitHeader/components/HeaderStandard.vue",
        ]
    }
}

3 - I've tried to load the header with defineAsyncComponent like this:

let headers = {
    secondary: './components/HeaderSecondary.vue',
    standard: './components/HeaderStandard.vue'
}
const headerPath = shallowRef<string>(headers.default);
const currentHeader = defineAsyncComponent(() => import(headerPath .value));

4 - I've tried to load the header with a chain...

let headers = {
    secondary: './components/HeaderSecondary.vue',
    standard: './components/HeaderStandard.vue'
}
const headerPath = shallowRef<string>(headers.default);

function importHeader(){
    import(headerPath.default).then(val => {
        currentHeader.value = val.default;
    });
}

I have tried several other solutions, but nothing worked out

There are other questions out there, but none has solved my problem

I have also checked out a package from rollup which should have helped but didn't work either. When I add dynamicImportVars to the vite.config.js under plugins the whole page crashes, I assume that the include key is default all as it says so in the documentation.

Resources

1 - I've been looking at this question which has 1k views in 3 months and no upvotes, so people still need answers.

2 - I've been looking at this question which has no answers and 3 upvotes

3 - I've been looking at this and this which looked promising, but I could not get it to work.

The error is something along these lines:

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module

Does anyone know an answer to this?