JetStream CSS and JS not working and showing @vite(['resources/css/app.css', 'resources/js/app.js'])

Question

**I installed livewire ,laravel mix and jetstream on laravel 8. But the Jetsream's css and js is not working and shows a message in header that '@vite(['resources/css/app.css', 'resources/js/app.js'])' **

App.blade.php

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <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.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Styles -->
        @livewireStyles

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="font-sans antialiased">
        <x-jet-banner />

        <div class="min-h-screen bg-gray-100">
            @livewire('navigation-menu')

            <!-- Page Heading -->
            @if (isset($header))
                <header class="bg-white shadow">
                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                        {{ $header }}
                    </div>
                </header>
            @endif

            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
        </div>

        @stack('modals')

        @livewireScripts
    </body>
</html>

score 29 · Answer 1 · edited Aug 30 '22 at 11:07

29

go to (app.blade.php, guest.blade.php) and remove @vite like this

@vite(['resources/css/app.css', 'resources/js/app.js']) => Remove this and add following 

<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>

edited Aug 30 '22 at 11:07

Tyler2P

2,324
26
22
31

answered Aug 24 '22 at 18:38

Anojan

297
2
4

1

by the way why @vite is used ? – Khn Rzk Sep 10 '22 at 11:14
1

tnx worked for mine... i think this happens because of using newer versions of Jetstream with an older version of laravel – Jenova Dec 04 '22 at 16:14

IslamYearul · Accepted Answer · 2022-07-31T13:33:03.977

Replace the Welcome.blade.php and guest.blade.php and test.blade.php with this code, It's work for me

 <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <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.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

          <!-- Styles -->
          <link rel="stylesheet" href="{{ asset('css/app.css') }}">
          @livewireStyles
      
          <!-- Scripts -->
          <script src="{{ asset('js/app.js') }}" defer></script>
      
    </head>
    <body>
        <div class="font-sans text-gray-900 antialiased">
            {{ $slot }}
        </div>
        @livewireScripts
    </body>
</html>

Thanks for the workaround. However, it will be good to know why the @vite directive is not working as expected. — Justin, Sep 13 '22 at 19:54

Khn Rzk · Answer 3 · 2023-02-12T02:06:59.787

2

VITE build configurations comes with only Laravel 9 & above, if we pull breeze or Jetstream to lower version [Below Laravel 9], it will cause this issue, because lower version got the configuration of Laravel mix. Breeze & Jetstream by default with VITE configuration despite the version of laravel.

You have to update your laravel version above 9, for that you have to update your local PHP version above 8

edited Feb 12 '23 at 02:06

answered Feb 11 '23 at 05:51

Khn Rzk

1,124
2
15
26

score 1 · Answer 4 · answered Sep 20 '22 at 08:30

1

Laravel 8 does not support vite. So this is why you see your directive as a string.

Besides, for me, I have to force the assets to load via HTTPS schema. In AppServiceProvider.php boot() according to this https://stackoverflow.com/a/51819095/8369356.

answered Sep 20 '22 at 08:30

Hódos Gábor

109
1
7

score 1 · Answer 5 · answered Dec 09 '22 at 12:22

1

Removing @vite(['resources/css/app.css', 'resources/js/app.js']) and replacing it with

<link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <script src="{{ asset('js/app.js') }}" defer></script>

worked for me

answered Dec 09 '22 at 12:22

Ali Muhammad

11
3

score 0 · Answer 6 · answered Aug 28 '22 at 11:03

0

I ran into the same issue, I solved it by switching to PHP 8. You have to delete your project and re-create it after switching.

answered Aug 28 '22 at 11:03

user5389242

23
5

score 0 · Answer 7 · answered Jan 19 '23 at 01:15

0

I had this issue and discovered the reason was because I didn't name the file correctly, I used app.php instead of app.blade.php. Fixing that fixed the issue.

answered Jan 19 '23 at 01:15

22289d

81
1
7

score 0 · Answer 8 · answered Feb 17 '23 at 05:21

0

Just go to config/app.php and:

 'url' => env('APP_URL', 'http://localhost'),
 // 'asset_url' => env('ASSET_URL', '/'),
 'asset_url' => env('APP_URL', '/'),

.env file may do not content ASSET_URL parameter. Just set ASSET_URL same to APP_URL

All 404 NOT FOUND errors can be tracked to an URL misconfiguration

answered Feb 17 '23 at 05:21

Sorry, after, run php artisan config:clear to reload config settings – Feb 17 '23 at 05:27

score 0 · Answer 9 · answered Feb 26 '23 at 18:28

if you are in development just run this cmd

npm run dev

if you are in production mode

<link rel="stylesheet" href="/build/assets/app.YOUR_FILE_NAME.css">
<script src="/build/assets/app.YOUR_FILE_NAME.js"></script>

these two js / CSS files will be renamed every time you run: npm run build

if you want to get the names dynamically I made a foreach for that you can put it in your app.blade.php between tag

@production
    @php $path = public_path('build\assets'); @endphp

@if (file_exists($path))
    @foreach (scandir($path) as $file)
        @if (strpos($file, '.css'))
            <link rel="stylesheet" href="{{ asset('build/assets/' . $file) }}">
        @endif
        @if (strpos($file, '.js'))
            @push('scripts')
                <script src="{{ asset('build/assets/' . $file) }}"></script>
            @endpush()
        @endif
    @endforeach
@endif
@else
@vite(['resources/css/app.css', 'resources/js/app.js'])
@endproduction

and finally, add this before the body like this:

@stack('scripts') </body>

score -1 · Answer 10 · answered Aug 23 '22 at 10:47

just paste two line inside ( app.blade.php, guest.blade.php ) instead of @vite like this :

    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <script src="{{ asset('js/app.js') }}" defer></script>
    
    {{-- @vite(['resources/css/app.css', 'resources/js/app.js']) --}}

and paste this code inside this folder public/mix-manifest.json

"/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css"

score -1 · Answer 11 · answered Sep 05 '22 at 05:44

-1

It's probably a caching problem fo: Run the command:

sail restart

answered Sep 05 '22 at 05:44

user10953333

1

score -1 · Answer 12 · answered Jan 17 '23 at 18:00

-1

if you update your project from laravel-mix to Vite. Just use

"npm run dev"

after that run: "npm run build"

it works fine

answered Jan 17 '23 at 18:00

Ömer Atayilmaz

66
5

JetStream CSS and JS not working and showing @vite(['resources/css/app.css', 'resources/js/app.js'])

12 Answers12

Linked