79480891

Date: 2025-03-03 11:51:12
Score: 1
Natty:
Report link

Someone down voted this question. So I deleted it thinking the question irrelevant. But after 16 hours of research I noticed this is a common error with vite and svelte. Although I diagnosed it incorrectly at first. I change the vite minify: false. This lead to a new error first_child_getter is undefined. This lead me to above github bug with Svelte 5 best described by linked comment. Current solution proposed was to add following to svelte plugin:

//...
           compilerOptions: {
                compatibility: {
                  componentApi: 4,
                },
            },
//...

This removed all errors.

Complete vite config for clarity:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { svelte } from "@sveltejs/vite-plugin-svelte";
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/sass/app.scss', 'resources/js/app.js'],
            refresh: true,
        }),
        svelte({
            emitCss:false,
            compilerOptions: {
                compatibility: {
                  componentApi: 4,
                },
            },
        })
    ],
    base: "./",
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
            // '@sveltestrap/sveltestrap': path.resolve(__dirname, 'node_modules/@sveltestrap/sveltestrap'),
        }
    },
    css: {
        preprocessorOptions: {
            scss: {
                api: 'modern-compiler', // or "modern"
                silenceDeprecations: ['mixed-decls', 'color-functions', 'global-builtin', 'import']
            }
        }
    },
    build: {
        cssMinify: true,
        minify: false,
        rollupOptions: {
            external: ['./node_modules/@sveltestrap/sveltestrap'],  // Make sure the library is properly bundled
            input: {
                appCss: path.resolve(__dirname, 'resources/sass/app.scss'),
                welcome: path.resolve(__dirname, 'resources/js/welcome.js'),
                app: path.resolve(__dirname, 'resources/js/app.js'),
            },
            output: {
                dir: 'public/build', // Output directory for all compiled files
                format: 'es', // Use ES module format
                entryFileNames: 'assets/[name]-[hash].js', // Generate separate JS files for each entry point
                chunkFileNames: 'assets/[name]-[hash].js', // Hash for chunked JS files (e.g., shared code)
                assetFileNames: (assetInfo) => {
                    let outputPath = '';

                    // Iterate over each name in the assetInfo.names array
                    if (assetInfo.names && Array.isArray(assetInfo.names)) {
                        assetInfo.names.forEach(name => {
                            if (name.endsWith('.css') && name.startsWith('appCss')) {
                                console.table({file:name});
                                // If it's a CSS file, output to the `css` directory
                                outputPath = 'assets/app-[hash].css';
                            } else {
                                // For other assets (images, fonts, etc.), output to `assets`
                                outputPath = 'assets/[name]-[hash].[ext]';
                            }
                        });
                    }

                    // Return the processed file path
                    return outputPath;
                },
            },
        },
      },
});
Reasons:
  • RegEx Blacklisted phrase (2): down vote
  • Long answer (-1):
  • Has code block (-0.5):
  • Self-answer (0.5):
Posted by: Hmerman6006