Level 80
@kylemabaso The error says what the problem is. You’re trying to compile Vue files that include inline <script> and/or <style> tags.
Dec 28, 2022
7
Level 3
[Vue warn]: Template compilation error: Tags with side effect
Hi Guys.
I'm updating our code base to Splade and Laravel 9. Everything was successful, then I then began creating views but the images are all over the place. They are too big and they don't seem to be accepting any of my attributes overrides even on the dev tools.
Here's the code for root.blade.php
<!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', 'Skills Panda') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">
<link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
<!-- App css -->
<link href="{{ asset('assets/css/app.min.css') }}" rel="stylesheet" type="text/css" id="app-style"/>
<!-- icons -->
<link href="{{ asset('assets/css/icons.min.css') }}" rel="stylesheet" type="text/css" />
<!-- Head js -->
<script src="{{ asset('assets/js/head.js') }}"></script>
<!-- Scripts -->
@vite(['resources/js/app.js'])
@spladeHead
</head>
<body class="font-sans antialiased">
@splade
<script src="{{ asset('assets/js/vendor.min.js') }}"></script>
<script src="{{ asset('assets/libs/apexcharts/apexcharts.min.js) }}"></script>
<script src="{{ asset('https://apexcharts.com/samples/assets/ohlc.js') }}"></script>
<script src="{{ asset('assets/js/app.min.js') }}"></script>
</body>
</html>
Code for dashboard.blade.php
<!-- Topbar Start -->
<div class="navbar-custom">
<div class="container-fluid">
<!-- LOGO -->
<div class="logo-box">
<a href="index.html" class="logo logo-dark text-center">
<span class="logo-sm">
<img src="assets/images/logo-sm.png" alt="" height="22">
<!-- <span class="logo-lg-text-light">UBold</span> -->
</span>
<span class="logo-lg">
<img src="assets/images/logo-dark.png" alt="" height="20">
<!-- <span class="logo-lg-text-light">U</span> -->
</span>
</a>
<a href="index.html" class="logo logo-light text-center">
<span class="logo-sm">
<img src="assets/images/logo-sm.png" alt="" height="22">
</span>
<span class="logo-lg">
<img src="assets/images/logo-light.png" alt="" height="20">
</span>
</a>
</div>
<div class="clearfix"></div>
</div>
</div>
I get these errors on the console:
[Vue warn]: Template compilation error: Tags with side effect (<script> and <style>) are ignored in client component templates.
setupWebSocket @ client.ts:78
(anonymous) @ client.ts:68
client.ts:78 WebSocket connection to 'wss://localhost:5173/' failed:
setupWebSocket @ client.ts:78
fallback @ client.ts:43
(anonymous) @ client.ts:99
client.ts:48 [vite] failed to connect to websocket.
your current setup:
(browser) [::1]:5173/ <--[HTTP]--> localhost:5173/ (server)
(browser) [::1]:5173/ <--[WebSocket (failing)]--> localhost:5173/ (server)
Check out your Vite / network configuration and https://vitejs.dev/config/server-options.html#server-hmr .
(anonymous) @ client.ts:48
(anonymous) @ client.ts:99```
Level 3
@martinbean Hi Martin. I can understand that when you read it out loud but the thing is, I didn't install Vue nor do I intend to use it. I just set up Splade with Breeze. Copied HTML from a template and pasted it on a blade file. I haven't done anything to the code to so perhaps it is compiling into Vue, but my setup is for Splade and Laravel. I just created a view and pasted the HTML. I must add that it starts off okay then a second later it updates.
Level 102
@kylemabaso Then at least show the code so we can try and find the error or recreate it. Solving the problem based on the error alone isnt possible as you can see
Level 3
@Sinnbeck I've updated the post with code examples.
Level 3
Update
I've noticed that the theme loads properly and the error goes away when I comment out this line:
@vite(['resources/js/app.js'])
It seems the problem is with Vite. Given that this is a fresh install, I don't know if there's additional configuraion that I'm supposed to do.
app.js looks like this:
import "./bootstrap";
import "../css/app.css";
import "@protonemedia/laravel-splade/dist/style.css";
import { createApp } from "vue/dist/vue.esm-bundler.js";
import { renderSpladeApp, SpladePlugin } from "@protonemedia/laravel-splade";
const el = document.getElementById("app");
createApp({
render: renderSpladeApp({ el })
})
.use(SpladePlugin, {
"max_keep_alive": 10,
"transform_anchors": false,
"progress_bar": true
})
.mount(el);
1 like
Level 1
@kylemabaso Have you found a solution?
I have the same problem...
Level 1
Since this is the first link on Google, the answer is here https://stackoverflow.com/a/72769116/3057066
"...In my case, I move id="app" attribute from to first then solved the problem..."
Please or to participate in this conversation.