[4.x] Mix to Vite migration

[esurov]

Migrated from laravel mix to vite following official migration guide: https://laravel.com/docs/10.x/vite

vite

[francoism90]

Hmm, I'm keep getting the following error after upgrading:

GET http://localhost:5173/resources/sass/app.scss net::ERR_ABORTED 404 (Not Found)

I've run npm run build and use Vite. For the record, it should be resources/css/app.css.

Horizon, etc. work fine, but Telescope is broken.

[taylorotwell]

@esurov Telescope actually doesn't even work in Laravel applications anymore when the application is running npm run dev?

[taylorotwell]

#1399

[wfern]

@esurov the problem is the "hot file" path...

It need to be set in place or before of the @vite directive or called somewhere before rendering.

The problem is because the default hot path is relative to the main application not telescope, so when we run npm run dev it gets the hot file from the main application: https://github.com/laravel/framework/blob/d0a6080db78a7e8a3316ff9c41eb86aa0866742d/src/Illuminate/Foundation/Vite.php#L170C54-L170C54

Example how to fix:

// .../telescope/resources/view/layout.blade.php

// Maybe it's better to set it in the TelescopeServiceProvider but this works for test purposes 
{{ Vite::useHotFile('public/hot') }}
    
@vite('resources/sass/' . $cssFile, '/vendor/telescope/build')

[timacdonald]

If we revisit this, we should consider: laravel/framework#48964

[daniser]

As a person who extensively uses Vite in my own packages, I already have solutions for this problem.

Define hot file path in template

layout.blade.php

{{ Vite::useHotFile('vendor/my-package/hot')
    ->useBuildDirectory('vendor/my-package/build')
    ->withEntryPoints(['resources/js/app.js', "resources/js/pages/{$page['component']}.vue"]) }}

The problem with this solution is, the Vite class is singleton, so it may affect main app entry points/build dir/hot file path etc in unpredictable ways.

Use macro or mixin

MyPackageServiceProvider.php

public function boot()
{
    Vite::mixin(new Support\ViteAliasMixin);
}

ViteAliasMixin.php

<?php

namespace MyVendor\MyPackage\Support;

use Illuminate\Foundation\Vite;

class ViteAliasMixin
{
    protected function myPackageEntryPoint(): \Closure
    {
        return fn (array $page) => $this
            ->useHotFile('vendor/my-package/hot')
            ->useBuildDirectory('vendor/my-package/build')
            ->withEntryPoints(['resources/js/app.js', "resources/js/pages/{$page['component']}.vue"]);
    }
}

layout.blade.php

{{ Vite::myPackageEntryPoint($page) }}

I use this solution in my packages, but it has same flaws as the previous one.

Implement some kind of Vite config manager and configure its instance in package's service provider

I already had PR for this, but unfortunately it was closed, so I implemented this functionality as a package.
I use this in my project, but not in my packages yet, as I don't want excess dependencies. I hope maybe one day we'll revisit this PR and it'll made its way into core?

MyPackageServiceProvider.php

public function boot()
{
    Vite::app('my-package')
        ->useHotFile('vendor/my-package/hot')
        ->useBuildDirectory('vendor/my-package/build')
        ->withEntryPoints(['resources/js/app.js']);
}

layout.blade.php

@viteApp('my-package')