CSS file paths in Vite 3 manifest broken on Windows

[AhsanAbrar]

• Laravel Vite Plugin Version: 0.5.0
• Laravel Version: 9.21.3
• Node Version: 16.13.2
• NPM Version: 8.1.2
• Host operating system: Windows
• Web Browser & Version: Chrome - Version 103.0.5060.134 (Official Build) (64-bit)
• Running in Sail / Docker: No

Description:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

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

After running this command:

npm run build

Getting this error:

Unable to locate file in Vite manifest: resources/css/app.css.

Steps To Reproduce:

I have done some research on it.

there is an issue in the manifest.json file.

{
  "resources/js/app.js": {
    "file": "assets/app.8fe7c9ab.js",
    "src": "resources/js/app.js",
    "isEntry": true
  },
  "resources/css\\app.css": {
    "file": "assets/app.8794147c.css",
    "src": "resources/css\\app.css"
  }
}

and in the Vite.php this manifest key is not matching.

that's why js files working fine and css files having issues.

please fix this, thanks.

[driesvints]

Using Windows?

[driesvints]

Please fill out the FULL issue template.

[AhsanAbrar]

Yes, using Windows

[driesvints]

Can you please fill out the remaining parts of the issue template?

- Host operating system: Windows / Linux / macOS #.#.#
- Web Browser & Version: ?
- Running in Sail / Docker: No|Sail|Docker

[AhsanAbrar]

I have updated it.

[schonhoff]

Hi,

same error for me after updating to plugin version 0.5.0 and vite 3.0.2

Laravel Vite Plugin Version: 0.5.0
Laravel Version: 9.21.4
Node Version: 16.14.2
NPM Version: 8.13.2
Host operating system: Windows
Web Browser & Version: Chrome - Version 103.0.5060.134 (Offizieller Build) (64-Bit)
Running in Sail / Docker: No

Found this issue to the error:
#19

[jessarcher]

Hi @AhsanAbrar,

As of version 3, Vite is now responsible for adding CSS files to the manifest. In version 0.5.0 of this plugin, we removed our code that manually added these entries.

Therefore it seems like this is an issue with Vite 3 rather than this plugin.

If you're using a front-end framework like Vue, then I would recommend importing your CSS via JavaScript instead of having a CSS entry point. Be sure to also update your @vite directive to only include the JavaScript entry point.

Otherwise, I would suggest using Vite 2 with version 0.4.0 of this plugin until this issue is resolved upstream.

[driesvints]

Thanks @jessarcher

[timacdonald]

I've opened a PR to address this in Vite. I would absolutely love if someone could test this fix for me as I cannot actually test this fix locally.

See: vitejs/vite#9353

[timacdonald]

The fix for this has been merged upstream and I assume will be tagged in Vite v3.0.4 sometime soon.

[timacdonald]

v3.0.4 of Vite has now been tagged.

Please update to the latest version and this issue should be resolved for you.

See: https://github.com/vitejs/vite/blob/v3.0.4/packages/vite/CHANGELOG.md

[AhsanAbrar]

@timacdonald You did a great job! Thanks

[schonhoff]

Thanks for the fix! It worked!!!

[timacdonald]

Glad it is sorted for you, folks!