Vitepress and Vuetify 3 (beta)

[dulimarta]

I have a static site built from VuePress and Vuetify 2 and have been trying to upgrade the site to VitePress (1.0.0-alpha.10) and Vuetify 3 (3.0.0-beta.10).

This is what I have in .vitepress/theme/index.ts:

import "vuetify/styles"
import {createVuetify} from "vuetify"
import * as components from "vuetify/components"
import * as directives from "vuetify/directives"

const vuetify = createVuetify({components, directives})

export default {
  enhanceApp({app}) {
    app.use(vuetify)
  }
}

I'm able to browse the static site locally by running vitepress dev, but building the static page by running vitepress build gives me "Unknown file extension error .css":

 TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for C:\xxxxxxxx\node_modules\vuetify\lib\components\VCode\VCode.css
    at new NodeError (node:internal/errors:371:5)
    at Object.file: (node:internal/modules/esm/get_format:72:15)
    at defaultGetFormat (node:internal/modules/esm/get_format:85:38)
    at defaultLoad (node:internal/modules/esm/load:13:42)
    at ESMLoader.load (node:internal/modules/esm/loader:303:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:230:58)
    at new ModuleJob (node:internal/modules/esm/module_job:63:26)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:244:11)
    at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:78:21)
    at async Promise.all (index 0) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

Any help to solve this issue will be appreciated.

[dulimarta]

I think I found the answer to my own issue. Adding the following vite entry in .vitepress/config seems to solve the issue:

// .vitepress/config.ts
import {defineConfig} from "vitepress"

export default defineConfig({
  title: "____".
  description: "____",
  vite: {     // <=== insert this section 
    ssr: {
      noExternal: ["vuetify"]
    }
  }
})

[Mart0119]

This method doesn't work

[roziscoding]

To update, the way of doing this is now:

import { defineUserConfig, viteBundler } from "vuepress-vite";

export default defineUserConfig({
  bundler: viteBundler({
    viteOptions: {
      ssr: {
        noExternal: ['vuetify']
      }
    }
  }),
})

[betaglot]

What file do I write this in?

[Mart0119]

How to solve this problem?