[Bug Report] VSkeletonLoader (via VBoilerplate component shown in Vuetify Docs) not showing in production

[SumNeuron]

Module version
The version of the module you're using.
Latest
Describe the bug
A clear and concise description of what the bug is.

To Reproduce

1. Clone repo
2. use python docker script to build and launch dev environment python docker.py -c up
3. go to localhost. You should see v-skeleton-loader of type table which comes from component VBoilerplate.vue (taken from Vuetify.js documentation)
4. stop dev environment python docker.py -c down
5. launch production environment python docker.py -c up -p
6. go to localhost:3000, notice component is mounted, but skeleton loader is nowhere to be seen (you can also see the deployed gitlab page here: https://sumneuron.gitlab.io/vskel/ vue tools are enabled)

Reproduction Link

https://gitlab.com/SumNeuron/vskel

Expected behavior
A clear and concise description of what you expected to happen.
"It just works", no extra configuration between dev and production for vskeletonloader / vboilerplate

Screenshots
Checkout the deployed gitlab page https://sumneuron.gitlab.io/vskel/ vue tools are enabled)

Additional context
Add any other context about the problem here.

[kevinmarrec]

@SumNeuron On https://gitlab.com/SumNeuron/vskel/blob/master/src/layouts/default.vue, nuxt should be inside a v-app.

https://vuetifyjs.com/en/components/application
https://codesandbox.io/s/nuxtjs-vuetify-v0k7i (layouts/default.vue)

[SumNeuron]

@kevinmarrec I am aware the vuetify likes to have things wrapped in v-app but that does not change the bug: https://sumneuron.gitlab.io/vskel/

To confirm, I just re-wrapped nuxt in v-app and bug persists

[kevinmarrec]

@SumNeuron vuetify-loader only automatically imports components found in template section, and you have commented the imports in https://gitlab.com/SumNeuron/vskel/blob/master/src/components/VBoilerplate.vue.

That's why you don't have anything displayed :

[SumNeuron]

@kevinmarrec Ah, you noticed. Yes, I thought it would be required to important the component a la carte and registered it. However, doing so doesn't change anything, hence why I commented it out.

Current status of the file

<script>
import {VSkeletonLoader} from 'vuetify/lib'
export default {
  props:[],
  inject: ['theme'],
  functional: true,
  components: {VSkeletonLoader},
  render (h, { data, props, children }) {
    return h('v-skeleton-loader', {
      ...data,
      props: {
        ...props,
      },
    }, children)
  },
}
</script>

and no skeleton showing in deployment

[kevinmarrec]

I think it's cause docker doesn't install devDependencies, so the Vuetify module is never called by Nuxt.

[kevinmarrec]

devDependencies are required for the Nuxt build.
AFAIK Docker has a production env somehow that make npm/yarn not installing devDependencies.

[kevinmarrec]

Nvm, seems it's not that, well try using component through template to see if it works.

Overall I think this issue it not related to the module, but more likely how you're trying to build the component.

[SumNeuron]

@kevinmarrec i just moved vuetify from devDependencies to dependencies to test the theory... and you are right, that is not the case.... Nonetheless the vuetify team think it is the module: vuetifyjs/vuetify#9865 (hence me posting here).

How would I do what you suggest? I just took VBoilerplate from the vuetify documentation

[kevinmarrec]

@SumNeuron Vue functional components doesn't support components: {} then using their name as string in render function if they are not registered globally (Related: vuejs/vue#7492). You should instead directly pass the component itself to the render function :

import { VSkeletonLoader } from 'vuetify/lib'

export default {
  props:[],
  inject: ['theme'],
  functional: true,
  render (h, { data, props, children }) {
    return h(VSkeletonLoader, {
      ...data,
      props: {
        ...props,
      },
    }, children)
  },
}

Works for me in both dev & production.

Vuetify core components do it as well :
https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDataTable/VEditDialog.ts#L105
https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VColorPicker/VColorPicker.ts#L152

If you're wondering why it was working in dev mode, it's cause full Vuetify JS bundle is loaded, without treeShaking, registering all components globally. If you enable treeShake and keep v-skeleton-loader string instead of directly the component : that's what shows up in the console :

This is not something you can do anymore with v2 alpha of the Nuxt module, treeShake being enabled even in dev mode and prevent such issue to happen between dev & production.

I think you should have everything you need right here, so please consider closing the issue afterwards :)

[SumNeuron]

@kevinmarrec yup that does it! would have taken me forever to figure that out. Thank you very much.

As VBoilerplate is a component I took directly from the docs, it may be relevant to inform them to update the docs so that others may not encounter this same issue.

[kevinmarrec]

@SumNeuron No problem. I'll inform them 😉