Laravel 12 Breeze with Svelte multiple file compiling in Vite not working

To answer your question, let me first provide some context about Laravel Breeze and Svelte, and then discuss the issue you're encountering with multiple file compiling in Vite.

Laravel Breeze is a starter kit for building web applications using Laravel and Tailwind CSS. It sets up a new Laravel project with the necessary files and configurations for using Tailwind CSS and Jetstream, Laravel's authentication scaffolding.

Svelte is a progressive JavaScript framework for building user interfaces. It compiles your components into optimized JavaScript and CSS, which can be easily integrated into your Laravel application.

Now, let's discuss the issue you're encountering with multiple file compiling in Vite. Vite is a build tool for modern web projects, and it's often used with Svelte for compiling and bundling your components. However, when using Laravel Breeze with Svelte, you might encounter some issues with multiple file compiling.

The issue arises because Laravel Breeze uses Webpack for asset compilation, while Vite uses its own approach. To work around this issue, you can use Laravel Mix with Vite to compile your Svelte components. Here's how you can do it:

Install Laravel Mix and Vite:

First, make sure you have Laravel Mix installed in your project. If not, run the following command:

npm install --save-dev laravel-mix

Next, install Vite and its dependencies:

npm install --save-dev vite @rollup/plugin-svelte rollup-plugin-postcss

Configure Laravel Mix:

Open the webpack.mix.js file in your project and add the following lines at the beginning:

require('laravel-mix');
require('vite');

Then, modify the mix function to use Vite for compiling your Svelte components:

const mix = require('laravel-mix');
const { createVuePlugin } = require('vite-plugin-vue');
const svelte = require('rollup-plugin-svelte');
const postcss = require('rollup-plugin-postcss');

mix.react('app.js', 'public/app.js')
  .vue()
  .options({
    extractVueTemplate: false,
  })
  .sourceMaps(false, 'inline-source-map')
  .browserSync('localhost:3000')
  .devtool('source-map')
  .plugin(createVuePlugin())
  .plugin(svelte())
  .plugin(postcss())
  .addEntry('svelte', './resources/js/svelte.js')
  .addAlias({
    '@': path.resolve(__dirname, 'resources/js'),
  })
  .copy('resources/images', 'public/images')
  .copy('resources/fonts', 'public/fonts')
  .copy('resources/css', 'public/css')
  .copy('resources/js', 'public/js')
  .copy('node_modules/tailwindcss/base.css', 'public/css/base.css')
  .copy('node_modules/tailwindcss/components.css', 'public/css/components.css')
  .copy('node_modules/tailwindcss/utilities.css', 'public/css/utilities.css');

Create a new Svelte entry file:

Create a new file named svelte.js in the resources/js directory and add the following code:

import { createApp } from 'svelte';
import App from './App.svelte';

createApp(App).mount('#app');

Create a new Svelte component:

Create a new file named App.svelte in the resources/js/svelte directory and add your Svelte component code here.

Update your Laravel view:

Update your Laravel view to include the compiled Svelte component. Replace the contents of your resources/views/welcome.blade.php file with the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel Breeze with Svelte</title>
    @vite('svelte')
</head>
<body>
    <div id="app"></div>
</body>
</html>

Run the development server:

Finally, run the following command to start the development server:

npm run development

This should allow you to compile and run multiple Svelte files in your Laravel Breeze project using Vite.