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