[Bug Report][3.7.8] Vuetify Breaks in SSR Mode (Tailwind works)

[lakhbawa]

Environment

Vuetify Version: 3.7.8
Vue Version: 3.3.0
Browsers: Edge 132.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

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',
    },
});

inertia.php

<?php

return [
    'ssr' => [

        'enabled' => true,

        'url' => 'job:13714',

        // 'bundle' => base_path('bootstrap/ssr/ssr.mjs'),

    ],
];

docker-compose.yml (Removed unnecessary containers)

version: "3"
services:
  #PHP Service
  app:
    depends_on:
      - db
    image: lakhveerbawa/phpdock:arm
    command:
      - php-fpm
    expose:
      - 9000:9000
      - 9003:9003
    restart: unless-stopped
    tty: true
    environment:
      SERVICE_NAME: app
      SERVICE_TAGS: dev
    working_dir: /var/www
    volumes:
      - ./:/var/www
      - ./docker/config/php/local.ini:/usr/local/etc/php/conf.d/local.ini
    networks:
      - app-network

  job:
    depends_on:
      - db
    build:
      context: ./docker/job
      dockerfile: Dockerfile
    expose:
      - 9000:9000
      - 13714:13714
    restart: unless-stopped
    tty: true
    environment:
      SERVICE_NAME: job
      SERVICE_TAGS: dev
    working_dir: /var/www
    volumes:
      - ./:/var/www
      - ./docker/config/php/local.ini:/usr/local/etc/php/conf.d/local.ini
      - ./docker/config/supervisor/conf.d:/etc/supervisor/conf.d
    networks:
      - app-network
  #Nginx Service
  nginx:
    image: nginx:alpine
    restart: unless-stopped
    tty: true
    ports:
      - "2000:80"
      - "2001:443"
    volumes:
      - ./:/var/www
      - ./docker/config/nginx/conf.d.local/:/etc/nginx/conf.d/
      - ./docker/config/nginx/conf.d.local/ssl:/etc/nginx/ssl/
    networks:
      - app-network
#Docker Networks
networks:
  app-network:
    driver: bridge
#Volumes
volumes:
  dbdata:
    driver: local
  redisdata:
    driver: local

#  default:
#    external:
#      name: nginx-proxy

Errror

Unknown file extension ".css" for /var/www/node_modules/vuetify/lib/directives/ripple/VRipple.css
2025-01-29 17:40:39 at new NodeError (node:internal/errors:405:5)
2025-01-29 17:40:39 at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:136:11)
2025-01-29 17:40:39 at defaultGetFormat (node:internal/modules/esm/get_format:182:36)
2025-01-29 17:40:39 at defaultLoad (node:internal/modules/esm/load:101

Expected Behavior

Vuetify SSR Fails with InertiaJs

Actual Behavior

SSR should work

Reproduction Link

https://gist.github.com/lakhbawa/9ec18198daf45c9995b015e62072f5d5

[KaelWD]

I think it's ssr.noExternal not server.noExternal.