Trying to use VDataTable from labs but getting 'VDataTable' is not exported by node_modules/vuetify/lib/components/index.mjs error

Question

I am migrating an old Vue project to Vue3 + Vuetify3 + Vite. I am stuck on the VDataTable which is available via Vuetify Labs.

I have followed instructions for importing the VDataTable component in vuetify.js:

    import { createVuetify } from 'vuetify'
    import * as components from 'vuetify/components'
    import * as directives from 'vuetify/directives'
    import { VDataTable } from 'vuetify/labs/VDataTable'
    
    const vuetify = createVuetify({
      components : {
        ...components,
        VDataTable,
      },
      directives,
    });
    export default vuetify;

But when I try to use <v-data-table> in my MyTable component, I get the following error in the Console (vite dev mode) and the table is not displayed:

SyntaxError: The requested module '/node_modules/.vite/deps/vuetify_components.js?v=56a024d1' does not provide an export named 'VDataTable' (at MyTable.vue?t=1678324759732:1:199)

I am using Vite for the build and the Vuetify3Resolver. Not sure this is relevant - isn't the syntax above importing the component directly?

Also, running a vite build I get the following error:

'VDataTable' is not exported by node_modules/vuetify/lib/components/index.mjs, imported by src/components/MyTable.vue
file: C:/dev/tpw/src/components/MyTable.vue:3:9
1: /* unplugin-vue-components disabled */import { VWindow as __unplugin_components_4 } from 'vuetify/components';
2: import { VWindowItem as __unplugin_components_3 } from 'vuetify/components';     
3: import { VDataTable as __unplugin_components_2 } from 'vuetify/components';      
            ^

What am I missing?

I have reproduced the issue here: https://stackblitz.com/edit/vitejs-vite-unrx3c?file=src/vuetify.js

Answer 1

I got this to work by changing the plugin I use for component import. Instead of using unplugin-vue-components (and the Vuetify3Resolver) I instead added vite-plugin-vuetify which is apparently the recommended way as per the Vuetify Docs. This makes the manual import of VDataTable work correctly.

It simplifies vite.config.js:

import { defineConfig } from 'vite';
import { resolve } from 'path';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';

export default defineConfig({
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
  plugins: [
    vue(),
    vuetify({ autoImport: true }), // Enabled by default
  ],
});

And also simplifies vuetify.js as you don't need any * imports since the vite-plugin-vuetify automatically imports components as required:

import { createVuetify } from 'vuetify'
import { VDataTable } from 'vuetify/labs/VDataTable'

const vuetify = createVuetify({
  components : {
    VDataTable,
  },
});
export default vuetify;