Vue dynamic components import behaviour does not replicate in production build

• Laravel Vite Plugin Version: 0.7.0

• Laravel Version: 9.19

• Node Version: 16.16.0

• NPM Version: 8.11.0

• Host operating system: Ubuntu 22.04.1

• Web Browser & Version: Brave 1.45.131

• @vitejs/plugin-vue: 3.2.0

• vite: 3.0.0

Description:

I am loading components dynamically in vue and in dev mode it was working fine but in production build the dynamic components were referred in their pre-build state and failed to load TypeError: Failed to fetch dynamically imported module: http://127.0.0.1:8000/build/assets/Foo.vue

My vite build is nothing special, just following laravel documentation. I don’t have deep knowledge in vite build configurations and rely solely on laravel eco system. In contrast laravel-mix was generating additional js files after build for the dynamic imports and was working fine with the same vue code.

export default defineConfig({
    plugins: [
        vue({transformAssetUrls: {base: null, includeAbsolute: false}}),
        laravel({
            input: [
                'resources/css/app.css', 'resources/js/app.js', 'resources/js/spa.js'
            ],
            refresh: true,
        }),
    ]
});

Can’t really be sure what to qualified it as: a bug or undesired behavior compared to laravel build behaviors so far but I struggle to overcome the issue.

Steps To Reproduce:

Created a small repo with all files to reproduce in a laravel installation. example in resources/vue/App.vue with 2 dynamic components Foo.vue and Moo.vue

[webbby]

Just want to confirm that the above did actually resolve your issue?

I was looking for a dynamic solution because this is a mockup and in reality I have to define 20+ components so I was trying an import on demand. Yeah it works thank you for your kind effort and help. Not what I was looking for exactly but I do appreciate your effort It didn’t work right away actually the script needed the type="module" attr

<script type="module" src="{{asset('build/assets/spa.a4e4a9fb.js')}}"></script>

just for a feedback. 10x again

[timacdonald]

Just want to confirm that the above did actually resolve your issue?