Livewire issue @livewireStyles showing on page

Level 16

I believe I installed it correctly.

How did you installed it?

Level 1

I installed it via composer within the code terminal.

Level 1

Does the config file need to be edited to work?

Level 1

So I installed Livewire within the Microsoft Code Terminal. At the root using : composer require livewire/livewire

There is a file that does indeed show up in the vendor folder as expected called livewire.

Then in my base layout page i add:

<html>
<head>
    ...
    @livewireStyles
</head>
<body>
    ...
    @livewireScripts
</body>
</html>

However the above is still showing on the html page. I am new to this, What am I over looking?

tykus

Level 104

Your page is a Blade file, right? That is, it has .blade.php extension?

Level 1

Yep, it is a Blade file.

tykus

Level 104

Has the browser cached the original response; can you hard refresh, or open dev tools and disable cache?

Level 1

Ok, I have hard refreshed and deleted the cache. Still getting the same outcome.

Snapey

Level 122

whats the view file called (the one you return in the LIvewire render method)

Snapey

Level 122

or maybe you have just failed to install livewire?

Level 1

Hi,

Is there a way to tell if its installed? I do see the vendor folder and it has the livewire folder and I can call livewire via artisan.

tykus

Level 104

I can call livewire via artisan

Then it is installed.

Can you describe how the base layout page relates to the view template you are rendering?

Level 1

Okay I will try :

Inside of the app folder I have http - Livewire [ Counter.php ] Inside Resources I have views folder then i have a livewire folder with - counter.blade.php My base layout page is : view - layout.blade.php << ( this is what I am using for my general admin / website template.

On the layout.blade.php I have


<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Bloc__Elemen--Modidier -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    {{-- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">   --}}
    <script src="../../../scripts/script.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="../../../../css/stylesheet.css">
    <title>{{$id->CompanyName ?? '' }}</title>

    
    @livewireStyles

</head>

<body>
    
    @livewireScripts

Level 28

Hey @musel

Post the route.
Post the blade file that is being called by the route including sections and yield.
Post any included and or extended blade files.
Post the whole file for each file that you post except the routes file just post the route.

Level 1

Hello please see below the route and blade file being called.

Route :

Route::get("/welcome", function(){
    return view("welcome");
 });

Welcome :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>LiveWire Example</title>
    @livewireStyles
</head>
<body>
    @livewireScripts
</body>
</html>

I also confirmed that Livewire is showing in artisan. Let me know if more is needed.

frankielee

Level 29

Compare the head content of app.blade.php with the welcome.blade.php.

You need to import the app.js and other js, css files

Level 28

@musel Make sure that you're importing all the JS and CSS on top of the LiveWire CSS in the LiveWire script open up your Dev tools and see what the head looks like in the end make sure that you're including a file that requires those scripts and CSS files we're just put it at the head of the welcome

Level 1

How do I do import the app.js etc:

"You need to import the app.js and other js, css files"

I am not sure on this part. Also, I am not sure about the dev tools. where is that located?

Level 28

@musel right click on the page and click view source and select view source that will show you the source the HTML that's being rendered for that particular page and then scroll to the top and see if you see the apps.JS in the app.CSS included along with all the other CSS And js

Level 28

@musel does your application have a layout app.blade.PHP file if so open that file and look and see how it imports the JavaScript in the CSS and either include that file or copy and paste the script tag for the CSS and the JS into your welcome.blade.php file

Level 1

So, I dont have the app.blade.php file. I think I change that a while back to layout.blade.php.

this file is my base template and on this page the header looks like this :

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Bloc__Elemen--Modidier -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    {{-- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">   --}}
    <script src="../../../scripts/script.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="../../../../css/stylesheet.css">
    <title>{{$id->ClientName ?? '' }}</title>

    

    
@livewireStyles
</head>

<body>
    
    

    

    <!-- this div [container] is holding all the element visable on the screen -->
    <div class="container">

        <nav class="navtop">
            

            <div class="area1"> 
                
                <div class="top-icon"> <span class="material-icons"> business </span> </div>
            ```

Level 28

@musel

put the js script tags at the bottom right before the closing tag of the body

<script src="../../../scripts/script.js" type="text/javascript"></script>
</body>

Level 1

They are still showing on the page.

I can confirm that the app.js and app.cs is is there.

they are located under resources > js- app.js and resources>sass- app.css

Level 28

@musel What browser do you use?

Level 28

@musel Are you able to right click on a web page and select view source from the contextual munue?

Level 1

I am using chrome

Level 1

This is what I am getting below: from view source :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>LiveWire Example</title>
    <script src="../../../scripts/script.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="../../../../css/stylesheet.css">
    <script src="https://head.companyname.com/js/app.js" defer></script>

    <!-- Styles -->
    <link href="https://head.companyname.com/sass/app.css" rel="stylesheet">
    @livewireStyles
</head>
<body>
    @livewireScripts
</body>
</html>

Level 28

@musel Is this site deployed? if so what is the url?

Level 1

Unfortunately i cant display the site url due to company data. I wish I could. i know it would help greatly. I will take a look to confirm if the JS being loaded.

Level 28

@musel You need to google chrome dev tools so that you can use them to see if your JS is getting loaded?

Level 1

Ok I see this message : Loading failed for the with source

Level 28

@musel Once you get chrome dev tools installed in chrome browser you can open chrome dev tools on the page that you are trying to check and you will see if there are any JavaScript errors and make adjustments to the script tags accordingly.

Level 1

I see this : Ok I see this message : Loading failed for the with source It is referencing the links to the js/app.js etc

Maybe a permissions issue on the folder?

Level 28

@musel Definately a permission issue. why are you referring to a different website to get your js and css?

Level 28

@musel That is why we adhere to the file structure and the conventions set forth in laravel, then we can use the helper functions to refer to the various file locations.

Now use the dev tools check and tweak the urls until you load the files.

remember you need the js at the end of the file right before the end of the body tag

Level 1

Ok will do! I will keep at it. I will report back as soon as I resolve the loading issue.

Level 28

@musel Definately a permission issue. why are you referring to a different website to get your js and css?

Level 1

@lemmon For the site css and js , I have a path to the file. Those files are on the company webserver. The folder where the assets show the css and js in the resources I am not sure why those are there of course I am starting to think I done something wrong when it comes that.

at the moment I have a js and css folder in the "Public" folder. This is where I am designing the site layout etc..

for example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>LiveWire Example</title>
    
    <link rel="stylesheet" type="text/css" href="../../../../css/stylesheet.css">

    
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Styles -->
    <link href="{{ asset('sass/app.css') }}" rel="stylesheet">
    @livewireStyles
</head>
<body>
    @livewireScripts
    <script src="../../../../scripts/script.js" type="text/javascript"></script>
</body>
</html>

Level 28

@musel Ok good luck :)

1 like

Level 28

@musel

The only thing you need to make livewire work is the

@livewireStyles
</head>
<body>

@livewireScripts
</body>

Tags

so something is wrong

After you create a new laravel app

and install livewire

and add the above tags it should work.

Do this

I would try creating a new laravel app

clear out the welcome file and add the tags like so

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        @livewireStyles

    </head>
    <body class="antialiased">
    <livewire:yours/>

    @livewireScripts
    </body>
</html>

create a livewire component and include it and see that it should work...

All the other css and javascript are irrelevant to livewire it has it's own seperate js and css.

Level 28

@musel maybe some of your other javascript is interfering with livewire?

Snapey

Level 122

this is not a javascript issue

@livewireStyles and @livewireScripts are expanded by BLADE well before the view is sent to the client

1 like

mehrane menasri

4 years ago

Level 1

You just need to clear your cache, run php artisan optimize:clear

10 likes

bestiony

Level 1

@mehrane menasri thanks a million. this solved it for me. I am using git for the first time and didn't know what was wrong till I cleared the cache

gfbdy

2 years ago

Level 1

@mehrane does need to be thanked... you won't find this solution on the documentation. saved my life.

shinbeth

Level 2

If I may add some input. I had this issue, straight after installation. But my composer was installed in ~/ , so I copied it to /usr/local/bin/composer and did the installation of livewire again. And it's all ok now. When composer is installed incorrectly then there's an error about failing to find composer, but I did not pay close attention and installation was false-positively successful.

ummerameen

Level 1

set PATH environment variable for php, re run jetstream and livewire. it works for me.

pierocox

Level 1

Después de un tiempo solucionado con 2 errores encontré la solución:

La vista no encontraba los assets de Livewire e investigando la documentación he encontrado este comando que lo soluciona: sail php artisan livewire:publish --assets Esto hará que dentro de la capeta 'public' se generen los assets de livewire en una carpeta llamada 'vendor'.
Error 404 en las peticiones al hacer click en el componente. El problema estaba en que ejecutando sail php artisan route:list no aparecian las rutas de Livewire. Por lo que después de ejecutar sail php artisan route:clear para limpiar la caché de rutas se solucionó.

juanca

Level 5

run 'php artisan optimize:clear' , it worked for me

ccssmania

Level 1

Cleaning the views cache worked for me.

php artisan view:cache

php artisan view:clear

4 likes

BluKoffee

Level 1

@ccssmania thank you, this worked for me :)

kaushalkumarshah