question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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:closed
  • Created 9 months ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
webbbycommented, Dec 21, 2022

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

0reactions
timacdonaldcommented, Dec 20, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Vue + Vite + Rollup: Dynamic import not working on ...
I was recently doing a PoC and was surprised to know that dynamic imports feature works fine in dev mode but fails in...
Read more >
Production Build Failed for Dynamic Import of `?raw` Files
Describe the bug I want to dynamically import content from a Markdown file, and use them as string. I won't also know if...
Read more >
3 Anti-Patterns to avoid in Vue.js
So what happened is that the computed property reversedArray modified the original array property because of the reverse function. This is a rather...
Read more >
Reactivity Fundamentals
When you mutate reactive state, the DOM is updated automatically. However, it should be noted that the DOM updates are not applied synchronously....
Read more >
Adding a new todo form: Vue events, methods, and models
Vue components are written as a combination of JavaScript objects ... create a new component that will allow us to add a new...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found