Why isn't my Vue component showing when using Webpack Code splitting?

Question

I'm trying to use Webpack's code splitting feature to decrease load times on my application, but I am struggling to get this to work. There are no errors in the console, and the file is being loaded in the network tab. However, the Vue component doesn't display on the screen. When inspecting the element in Chrome DevTools, I see , which indicates that the component is being loaded, but not shown for some reason.

I've tried toying around with the settings in Laravel Mix (i.e. renaming the chunks and changing the destination folder), but nothing seems to resolve the problem.

This is how I am trying to import the additional components:

let todoList = () => {
    import( '../../components/dashboard/todoList' );
}

export default {
  components: {
    todoList
  }
}

I would expect that this would import the component when required. It seems to be referencing the split script, but for some reason the component is not loading. What am I doing wrong here?

This is what I am seeing in the network tab in DevTools.

If you click 1.js and look at the response for it, that's a bundle generated by Webpack. So it likely is loading your component in one of those bundles. Is there any sort of conditional rendering on your component that could be causing it to not render, like v-if? — Nick G
– Nick G, Commented Aug 13, 2019 at 19:16
@NickG I have a v-if statement on the parent for loading which is v-if="!isLoading" — Gaz Jones
– Gaz Jones, Commented Aug 13, 2019 at 19:59
@tony19 to register my components I am simply doing the following components: {todoList} — Gaz Jones
– Gaz Jones, Commented Aug 13, 2019 at 20:00

tony19 · Accepted Answer · 2019-08-13 20:38:28Z

3

The todoList arrow function needs to return the dynamically imported component definition. Currently, it returns nothing.

You could either use the shorthand return, removing the statement brackets around the dynamic import (preferred for concise syntax and improved readability):

export default {
  components: {
    todoList: () => import(/* ... */)
  }
}

...or add a return keyword inside the statement brackets:

export default {
  components: {
    todoList: () => {
      return import(/* ... */)
    }
  }
}

answered Aug 13, 2019 at 20:38

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gaz Jones Over a year ago

Cheers Tony, massive help!

tony19 Over a year ago

@GarethJones No problem :)

Collectives™ on Stack Overflow

Why isn't my Vue component showing when using Webpack Code splitting?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related