Configuring Vite in existing projects...

Level 102

Can you post your layout (the file where you added that code)? And make sure that you have the newest version of laravel 9 by running composer update

Level 6

<!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', 'Trade Tracker') }}</title>

    @env('production')
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-R4BNDTYCG0"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());
        gtag('config', 'MEASUREMENT_ID', {
            'user_id': '{{ Auth::id() }}'
        });
        gtag('config', 'G-R4BNDTYCG0');
    </script>
    @endenv



    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
    <!-- Styles -->

    @livewireStyles

    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <script defer src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"></script>

    <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
    <script src="https://kit.fontawesome.com/bc2e885c03.js" crossorigin="anonymous"></script>
</head>

<body class="font-sans antialiased">
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5T254QB" height="0" width="0"
            style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <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="px-4 py-6 mx-auto max-w-7xl sm:px-6 lg:px-8">
                    {{ $header }}
                </div>
                @if (Session::get('ActingAs'))
                    <livewire:acting-as-banner />
                @endif
                @if (Session::get('showAccount'))
                    <livewire:banner />
                @endif
            </header>
        @endif

        <!-- Page Content -->
        <main class="container mx-auto my-auto">
            {{ $slot }}
        </main>
    </div>

    @stack('modals')

    @livewireScripts
</body>

</html>

And the console data from npm run dev looks like this.....

 vite v2.9.13 dev server running at:

  > Local:    http://localhost:3000/
  > Network:  http://192.168.1.181:3000/

  ready in 186ms.


  Laravel v9.19.0

Level 102

@PeterF Ok. Try ensuring that you have the latest laravel 9 version. composer update. The run php artisan and check the version number at the very top

Level 6

@Sinnbeck

$ php artisan
Laravel Framework 9.19.0

Usage:
  command [options] [arguments]

Level 102

@PeterF Good, that should be the newest. Can you post a screenshot of what you see on the page? I dont really see any way for blade to not read it as valid code

Level 6

I dont think you can post a screen shot on here..... but basically the top left of the browser window has this

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

ANd then the rest of the page arrives unstyled,

Level 102

@PeterF I honestly dont see any reason except your @ to not be picked up. Perhaps try removing the line and copying it back in from here. You can try placing it above @livewireStyles as well

Best Answer

Level 102

You can also try running php artisan view:clear to clear the view cache

1 like