Cannot use Vite 4 with Laravel and Svelte

[fpolli]

I and another person ran into a vexing issue the other day, and it looks like the problem is that Laravel has not changed its javascript to keep up with Vite.

When Vite went to version 4, Svelte immediately issued a new plugin that requires that version, and that no longer works with CommonJS modules. It requires ESM only. After a few days, Laravel issued a new Vite plugin to use Vite 4.

I had installed Laravel and Vite earlier, under the Vite 3 regime. When I tried to install the Svelte Vite plugin, Vite 4 had JUST been released - and I mean like hours ago. Svelte issued their new Vite plugin a couple hours after Vite, so Svelte wanted Vite 4 while I still had Vite 3, which is what the Laravel plugin required. Running npm install on the svelte plugin threw an error that the Svelte module could not be resolved.

The solution to that was to put "type": "module" in the Laravel package.json file. Svelte installed, but then when I tried to run npm run dev, it threw an error that "Laravel is not a function." Go to Laravel, and the solution to that is to remove "type":"module" from the package.json file because, well, as Dries Vints put it, "Laravel is an app, not a module."

You see the situation. The temporary workaround was to roll back to Vite 3 and the previous Svelte Vite plugin to accommodate Laravel. The permanent solution is beyond my expertise, but it seems to me that Laravel is the actor that has to move here.

I post this here because it is interesting and maybe if smarter and more experienced developers than I are aware of the situation, they might resolve it.

Thank you.

[sapphi-red]

I think you can use the laravel plugin from ESM like this.

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import laravelModule from 'laravel-vite-plugin';
const laravel = laravelModule.default;

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    svelte(),
    laravel([
      'resources/css/app.css',
      'resources/js/app.js',
    ])
  ],
});

[fpolli]

That is a very interesting idea. Thank you.

[EmonC]

发的信件已经收到。辛苦了，谢谢支持。 This is an automatic reply, confirming that your e-mail was received.Thank you

[Baspa]

The solution to this error - for me - was to add "type": "module" to the package.json.