Level 8
I've found vite works better with laravel if I import my css and reference my js with the @vite helper
Nov 17, 2022
6
Level 4
Windows > Docker > Vite
Hi Laracasts, I have a Dev build and am running into problems with Vite. I've created an environment by following the Laravel Bootcamp (Breeze & Blade) installation guide and all works Ok until Vite starts misbehaving, as evidenced by the CSS not styling as expected. There seems to be an issue with references but I can't figure it out. Things that are happening:
- My build was running fine without the NPM server running. All the CSS was working & the dropdowns were working.
- The reference in the Head of the Blade layouts was using the longer form @vite(['resources/css/app.css', 'resources/js/app.js']) without problems, but then started throwing the "Expecting a String & not an Array" error.
- This reference was changed to just @vite and the error went away, CSS started working (hurrah!) but now the dropdowns are unresponsive.
I suspect that my NPM workflow is incorrect and I have multiple configurations in play, but I don't know how to sort this out. I have tried removing the Vendor folder & running composer update but that didn't help.
Head section from resources > views > layouts > app.blade.php below.
Any help gratefully received!
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">
<!-- Scripts -->
@vite
</head>
Level 4
@twiceworks Thanks for the reply, but that link doesn't work?
Level 4
@twiceworks Oooo; I have found a reference on GitHub though... ;-)
Level 4
Hmmm. Well if anyone gets this far I should explain that I scrapped the build involved and started again, but this time I treated the dev environment with a bit more care, especially the NPM element, which I was using in a rather slapdash way. If a new package is going to be introduced/updated then it's best to know what the introduction / update is and what it's going to do, as things can quickly get a bit scrambled with the Laravel stack. Sigh ;-)
Level 3
Were you using any of the stuff from https://laravel-vite.dev/ ? That has diverged from laravel's stuff and they introduced a breaking change on @vite directive that would throw the kind of error you described.
Level 4
@rosspeterson Hi Ross! Thanks for your reply. I don't think I was knowingly using any Vite dev stuff though it's possible as I got a bit NPM crazied & started running any old command in the hope that things would magically resolve. Noobs eh? I'm being much more circumspect this time around and things are very stable; hurrah! ;-)
Please or to participate in this conversation.