Vue dynamic components import behaviour does not replicate in production build
See original GitHub issue-
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
Issue Analytics
- State:
- Created 9 months ago
- Comments:6 (3 by maintainers)
Top GitHub Comments
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"
attrjust for a feedback. 10x again
Just want to confirm that the above did actually resolve your issue?