[Windows]: Possible entrypoint path mismatch between the manisfest.json and Illuminate/Foundation/Vite.php

• Laravel Vite Plugin Version: v0.2.1 (latest)
• Laravel Version: v9.17.0 (after a composer create-project laravel/laravel:dev-vite)
• Node Version: v16.13.1
• NPM Version: v8.3.0

Description:

An Unable to locate file in Vite manifest: {$entrypoint} exception may be thrown on Windows caused by a mismatch between the entrypoint path strings stored in manisfest.json and an entry point given to the @vite Blade directive.

Example

Consider the following bare bones Vite config file:

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/ts/app.ts',
        ]),
    ],
});

And the @vite blade directive usage:

@vite(['resources/css/app.css', 'resources/ts/app.ts'])

This may produce the aforementioned exception.

This is because entrypoint paths in the manifest.json file may follow Windows’ backslash path separator:

{
    "resources/ts/app.ts": {
        "file": "assets/app.e6f6eb1a.js",
        "src": "resources/ts/app.ts",
        "isEntry": true,
    },
    "resources\\css\\app.css": { // <-- backslashes here
        "file": "assets/app.6d9d1460.css",
        "src": "resources\\css\\app.css",
        "isEntry": true
    }
}

But as here the CSS path given to the directive ('resources/css/app.css') uses the regular slash path separator this causes $manifest[$entrypoint] to fail in line 53 of /laravel/framework/blob/vite/src/Illuminate/Foundation/Vite.php.

Note

This only seem to happen for CSS entry paths.

Possible solutions

From what I understand taking a quick look at the source code of each library, the problem could be solved in line 166 by doing something similar to:

const relativeChunkPath = path.relative(resolvedConfig.root, chunk.facadeModuleId).replaceAll('\\', '/');

And on the PHP side:

// ...

$tags = collect();

foreach ($entrypoints as $entrypoint) {
    $entrypoint = str_replace('\\', '/', $entrypoint);

    if (!isset($manifest[$entrypoint])) {
        throw new Exception("Unable to locate file in Vite manifest: {$entrypoint}.");
    }

    // ...
}

Or only on the PHP side:

// ...

if (!isset($manifests[$manifestPath])) {
    // ...

    $manifests[$manifestPath] = collect(json_decode(file_get_contents($manifestPath), true))->flatMap(
        fn(array $value, string $key): array => [str_replace('\\', '/', $key) => $value]
    );
}

// ...

foreach ($entrypoints as $entrypoint) {
    $entrypoint = str_replace('\\', '/', $entrypoint);

    // ...
}

Question:

Which approach would be better suited to be PRed ?

Steps To Reproduce:

• Have a Windows machine
• Check out the example scenario given above

[VicGUTT]

Just dropping by to say Thank you ! @jessarcher for the implementation here and @timacdonald for the upstream PR. Freaking love Open Source ! 💪🏾 ❤️

[jessarcher]

Hey @VicGUTT,

Thanks for reporting this and for your proposed solutions!

I think the right approach would be to wrap the path in Vite’s normalizePath helper:

- import { Plugin, loadEnv, UserConfig, ConfigEnv, Manifest, ResolvedConfig, SSROptions } from 'vite'
+ import { Plugin, loadEnv, UserConfig, ConfigEnv, Manifest, ResolvedConfig, SSROptions, normalizePath } from 'vite'

...

- const relativeChunkPath = path.relative(resolvedConfig.root, chunk.facadeModuleId);
+ const relativeChunkPath = normalizePath(path.relative(resolvedConfig.root, chunk.facadeModuleId));

I’ll give this a try this afternoon.