Unknown file extension ".css" for /var/www/node_modules/vuetify/lib/directives/ripple/VRipple.css

Hi Everyone, It has been more than 3 months, and I am still struggling with the issue, Its preventing me to implementing Tree Shaking in Laravel, Vuejs, InertiaJs, and Vuetify Application

I am using SSR Rendering, on frontend, application is rendering properly but SSR rendering is not working correctly, Looks like Vite is trying to execute CSS file on SSR even when its not supposed to.

Please help me to figure out the issue

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    server: {
        noExternal: ['vuetify'],
    },
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            '@': '/resources/js', // Optional: Add an alias for easier imports
        },
    },
    define: {
        global: 'window',
    }
});

SSR.JS

import {createSSRApp, h} from 'vue';
import {renderToString} from '@vue/server-renderer';
import {createInertiaApp} from '@inertiajs/vue3';
import createServer from '@inertiajs/vue3/server';
import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers';
import {ZiggyVue} from '../../vendor/tightenco/ziggy/dist/vue.m';
import vuetify from './plugins/vuetify'; // Import Vuetify
const appName = import.meta.env.APP_BRAND_NAME || 'MockReady';

import * as Sentry from "@sentry/vue";

Sentry.init({
  dsn: import.meta.env.VITE_SENTRY_DSN_PUBLIC,
});

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        title: (title) => `${title} - ${appName}`,
        resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
        setup({App, props, plugin}) {
            return createSSRApp({render: () => h(App, props)})
                .use(plugin)
                .use(ZiggyVue, {
                    ...page.props.ziggy,
                    location: new URL(page.props.ziggy.location),
                }).use(vuetify);;
        },
    })
);

app.js

import 'vuetify/styles';
import './bootstrap';
import '../css/app.css';

import {createApp, h} from 'vue';
import {createInertiaApp} from '@inertiajs/vue3';
import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers';
import {ZiggyVue} from '../../vendor/tightenco/ziggy/dist/vue.m';
import vuetify from './plugins/vuetify'; // Import Vuetify
const appName = import.meta.env.APP_BRAND_NAME || 'MockReady';

import * as Sentry from "@sentry/vue";

Sentry.init({
  dsn: import.meta.env.VITE_SENTRY_DSN_PUBLIC,
});



createInertiaApp({
    title: (title) => `${title} | ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({el, App, props, plugin}) {
        return createApp({render: () => h(App, props)})
            .use(plugin)
            .use(ZiggyVue, Ziggy).use(vuetify)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});