Level 104
Check the Browser's console for any errors.
Mar 20, 2024
9
Level 3
In my laravel app am usning larapex charts for my chart but if u refresh the page the chart shows for a second and dissapears
my controller
<?php
namespace App\Http\Controllers;
use Spatie\Permission\Models\Role;
use Spatie\Permission\Models\Permission;
use App\Models\Report;
use App\Models\User;
use App\Models\Obook;
use App\Models\Assessment;
use App\Charts\UsersChart;
use Illuminate\Http\Request;
class DashboardController extends Controller
{
public function index(UsersChart $chart) {
$users = User::all();
$obooks = Obook::all();
$reports = Report::all();
$roles = Role::all();
$permissions = Permission::all();
$assessments = Assessment::all();
return view('dashboard.index',
compact('users', 'obooks', 'reports', 'assessments', 'roles', 'permissions'),
['chart' => $chart->build()] // key => value
);
}
}
my chart
<?php
namespace App\Charts;
use ArielMejiaDev\LarapexCharts\LarapexChart;
class UsersChart
{
protected LarapexChart $chart;
public function __construct(LarapexChart $chart)
{
$this->chart = $chart;
}
public function build(): \ArielMejiaDev\LarapexCharts\RadialChart
{
return $this->chart->radialChart()
->setTitle('Passing effectiveness.')
->setSubtitle('Barcelona city vs Madrid sports.')
->addData([75, 60])
->setLabels(['Barcelona city', 'Madrid sports'])
->setColors(['#D32F2F', '#03A9F4']);
}
}
my view
<x-layout>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Chart Sample</title>
</head>
<body class="h-screen bg-gray-100">
<div class="container px-4 mx-auto">
<div class="p-6 m-20 bg-white rounded shadow">
{!! $chart->container() !!}
</div>
</div>
<script src="{{ $chart->cdn() }}"></script>
{{ $chart->script() }}
</body>
</html>
</x-layout>
Level 3
first error
[Vue warn]: Template compilation error: Tags with side effect (<script> and <style>) are ignored in client component templates.
101| </div>
102|
103| <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
104|
105| <script>
at <Anonymous key=0 style= {} >
at <Render key="visit.2" style= {} html="<div class=\"min-h-screen \">\n <SpladeData \n :default=\"{ open: false }\" :remember=\"false\" :local-storage=\"false\">\n <template #default=\"data\">\n <nav class=\"bg-white border border-gray-150 w-8/12 justify-center mx-auto rounded-full mt-10 \">\n <!-- Primary Navigation Menu -->\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex justify-between h-16\">\n <div class=\"flex\">\n <!-- Logo -->\n <div class=\"shrink-0 flex items-center\">\n <a href=\"http://localhost:8000/dashboard\">\n <a href=\"/\">\n\n <img src=\"http://localhost:8000/images/fox.png\" alt=\"logo\" class=\"w-10 h-10 mr-10\">\n</a>\n </a>\n </div>\n <!-- Navigation Links -->\n <div class=\"hidden space-x-8 sm:-my-px sm:ml-10 sm:flex\">\n \n <a href=\"/\">\n <h1 class=\"font-semibold text-black mt-5 text-xl\">\n Farirai Masocha\n </h1>\n </a>\n\n \n <Link class=\"inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition\" href=\"http://localhost:8000/dashboard\">\n Dashboard\n</Link>\n\n <Link class=\"inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition\" href=\"http://localhost:8000/users\">\n Users\n</Link>\n\n <Link class=\"inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition\" href=\"http://localhost:8000/obook\">\n Obook\n</Link>\n <Link class=\"inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition\" href=\"http://localhost:8000/report\">\n Files\n</Link>\n <Link class=\"inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition\" href=\"http://localhost:8000/roles\">\n Roles\n</Link>\n <Link class=\"inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition\" href=\"http://localhost:8000/permissions\">\n Permissions\n</Link>\n <form method=\"POST\" action=\"http://localhost:8000/logout\">\n <input type=\"hidden\" name=\"_token\" value=\"dksN2t5r1URw7QR8Of9ZWNYpZ0KdaQdVqBFkSnbk\" autocomplete=\"off\"> <button class=\"block w-full px-4 py-2 text-sm text-white hover:bg-gray-100 mt-4 bg-gray-700 rounded-xl\"\n type=\"submit\">\n Logout\n </button>\n </form>\n </div>\n </div>\n\n <!-- Hamburger -->\n <div class=\"-mr-2 flex items-center sm:hidden\">\n <button @click=\"data.open = ! data.open\" class=\"inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition\">\n <svg class=\"h-6 w-6\" stroke=\"currentColor\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path v-bind:class=\"{'hidden': data.open, 'inline-flex': ! data.open }\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\" />\n <path v-bind:class=\"{'hidden': ! data.open, 'inline-flex': data.open }\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Responsive Navigation Menu -->\n <div v-bind:class=\"{'block': data.open, 'hidden': ! data.open }\" class=\"sm:hidden\">\n <div class=\"pt-2 pb-3 space-y-1\">\n <Link class=\"block pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition\" href=\"http://localhost:8000/dashboard\">\n Home\n</Link>\n </div>\n </div>\n </nav>\n </template>\n </SpladeData>\n <!-- Page Heading -->\n \n <!-- Page Content -->\n <main>\n <!doctype html>\n <html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n <title>Chart Sample</title>\n </head>\n <body class=\"h-screen bg-gray-100\">\n\n <div class=\"container px-4 mx-auto\">\n\n <div class=\"p-6 m-20 bg-white rounded shadow\">\n <div id=\"guinjybsvqhxearkzofwdmtcl\"></div>\n </div>\n\n </div>\n\n <script src=\"https://cdn.jsdelivr.net/npm/apexcharts\"></script>\n\n <script>\n var options =\n {\n chart: {\n type: 'radialBar',\n height: 500,\n width: '100%',\n toolbar: {\"show\":false},\n zoom: {\"enabled\":true},\n fontFamily: 'Helvetica, Arial, sans-serif',\n foreColor: '#373d3f',\n sparkline: {\"enabled\":false},\n },\n plotOptions: {\n bar: {\"horizontal\":false}\n },\n colors: [\"#D32F2F\",\"#03A9F4\"],\n series: [75,60],\n dataLabels: {\"enabled\":false},\n labels: [\"Barcelona city\",\"Madrid sports\"],\n title: {\n text: \"Passing effectiveness.\"\n },\n subtitle: {\n text: 'Barcelona city vs Madrid sports.',\n align: 'left'\n },\n xaxis: {\n categories: []\n },\n grid: {\"show\":false},\n markers: {\"show\":false},\n legend: {\n show: true\n }\n }\n\n var chart = new ApexCharts(document.querySelector(\"#guinjybsvqhxearkzofwdmtcl\"), options);\n chart.render();\n\n</script>\n\n </body>\n </html>\n </main>\n</div>\n<!-- 2 -->" >
at <KeepAlive key=0 max=10 >
at <SpladeApp el= <div id="app" data-v-app>…</div> >
at <App>
second
[Vue warn]: Template compilation error: Tags with side effect (<script> and <style>) are ignored in client component templates.
103| <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
104|
105| <script>
| ^^^^^^^^
106| var options =
| ^^^^^^^^^^^^^^^^^
107| {
| ^^^^^
108| chart: {
| ^^^^^^^^^^^^^^^^
109| type: 'radialBar',
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
110| height: 500,
| ^^^^^^^^^^^^^^^^^^^^^^^^
111| width: '100%',
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
112| toolbar: {"show":false},
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
113| zoom: {"enabled":true},
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
114| fontFamily: 'Helvetica, Arial, sans-serif',
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
115| foreColor: '#373d3f',
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
116| sparkline: {"enabled":false},
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
117| },
| ^^^^^^^^^^^^^^^^^^^^^^
118| plotOptions: {
| ^^^^^^^^^^^^^^^^^^^^^^
119| bar: {"horizontal":false}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
120| },
| ^^^^^^^^^^
121| colors: ["#D32F2F","#03A9F4"],
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
122| series: [75,60],
| ^^^^^^^^^^^^^^^^^^^^^^^^
123| dataLabels: {"enabled":false},
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
124| labels: ["Barcelona city","Madrid sports"],
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
125| title: {
| ^^^^^^^^^^^^^^^^^^^^^^^^
126| text: "Passing effectiveness."
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
127| },
| ^^^^^^^^^^
128| subtitle: {
| ^^^^^^^^^^^^^^^^^^^
129| text: 'Barcelona city vs Madrid sports.',
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
130| align: 'left'
| ^^^^^^^^^^^^^^^^^^^^^^^^^
131| },
| ^^^^^^^^^^
132| xaxis: {
| ^^^^^^^^^^^^^^^^
133| categories: []
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
134| },
| ^^^^^^^^^^
135| grid: {"show":false},
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
136| markers: {"show":false},
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
137| legend: {
| ^^^^^^^^^^^^^^^^^^^^^^^^^
138| show: true
| ^^^^^^^^^^^^^^^^^^^^^^
139| }
| ^^^^^^^^^
140| }
| ^^^^^
141|
| ^
142| var chart = new ApexCharts(document.querySelector("#guinjybsvqhxearkzofwdmtcl"), options);
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
143| chart.render();
| ^^^^^^^^^^^^^^^^^^^
144|
| ^
145| </script>
| ^^^^^^^^^
at <Anonymous key=0 style= {} >
at <Render key="visit.2" style= {} html="<div class=\"min-h-screen \">\n <SpladeData \n :default=\"{ open: false }\" :remember=\"false\" :local-storage=\"false\">\n <template #default=\"data\">\n <nav class=\"bg-white border border-gray-150 w-8/12 justify-center mx-auto rounded-full mt-10 \">\n <!-- Primary Navigation Menu -->\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex justify-between h-16\">\n <div class=\"flex\">\n <!-- Logo -->\n <div class=\"shrink-0 flex items-center\">\n <a href=\"http://localhost:8000/dashboard\">\n <a href=\"/\">\n\n <img src=\"http://localhost:8000/images/fox.png\" alt=\"logo\" class=\"w-10 h-10 mr-10\">\n</a>\n </a>\n </div>\n <!-- Navigation Links -->\n <div class=\"hidden space-x-8 sm:-my-px sm:ml-10 sm:flex\">\n \n <a href=\"/\">\n <h1 class=\"font-semibold text-black mt-5 text-xl\">\n Farirai Masocha\n </h1>\n </a>\n\n \n <Link class=\"inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition\" href=\"http://localhost:8000/dashboard\">\n Dashboard\n</Link>\n\n <Link class=\"inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition\" href=\"http://localhost:8000/users\">\n Users\n</Link>\n\n <Link class=\"inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition\" href=\"http://localhost:8000/obook\">\n Obook\n</Link>\n <Link class=\"inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition\" href=\"http://localhost:8000/report\">\n Files\n</Link>\n <Link class=\"inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition\" href=\"http://localhost:8000/roles\">\n Roles\n</Link>\n <Link class=\"inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition\" href=\"http://localhost:8000/permissions\">\n Permissions\n</Link>\n <form method=\"POST\" action=\"http://localhost:8000/logout\">\n <input type=\"hidden\" name=\"_token\" value=\"dksN2t5r1URw7QR8Of9ZWNYpZ0KdaQdVqBFkSnbk\" autocomplete=\"off\"> <button class=\"block w-full px-4 py-2 text-sm text-white hover:bg-gray-100 mt-4 bg-gray-700 rounded-xl\"\n type=\"submit\">\n Logout\n </button>\n </form>\n </div>\n </div>\n\n <!-- Hamburger -->\n <div class=\"-mr-2 flex items-center sm:hidden\">\n <button @click=\"data.open = ! data.open\" class=\"inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition\">\n <svg class=\"h-6 w-6\" stroke=\"currentColor\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path v-bind:class=\"{'hidden': data.open, 'inline-flex': ! data.open }\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\" />\n <path v-bind:class=\"{'hidden': ! data.open, 'inline-flex': data.open }\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Responsive Navigation Menu -->\n <div v-bind:class=\"{'block': data.open, 'hidden': ! data.open }\" class=\"sm:hidden\">\n <div class=\"pt-2 pb-3 space-y-1\">\n <Link class=\"block pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition\" href=\"http://localhost:8000/dashboard\">\n Home\n</Link>\n </div>\n </div>\n </nav>\n </template>\n </SpladeData>\n <!-- Page Heading -->\n \n <!-- Page Content -->\n <main>\n <!doctype html>\n <html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n <title>Chart Sample</title>\n </head>\n <body class=\"h-screen bg-gray-100\">\n\n <div class=\"container px-4 mx-auto\">\n\n <div class=\"p-6 m-20 bg-white rounded shadow\">\n <div id=\"guinjybsvqhxearkzofwdmtcl\"></div>\n </div>\n\n </div>\n\n <script src=\"https://cdn.jsdelivr.net/npm/apexcharts\"></script>\n\n <script>\n var options =\n {\n chart: {\n type: 'radialBar',\n height: 500,\n width: '100%',\n toolbar: {\"show\":false},\n zoom: {\"enabled\":true},\n fontFamily: 'Helvetica, Arial, sans-serif',\n foreColor: '#373d3f',\n sparkline: {\"enabled\":false},\n },\n plotOptions: {\n bar: {\"horizontal\":false}\n },\n colors: [\"#D32F2F\",\"#03A9F4\"],\n series: [75,60],\n dataLabels: {\"enabled\":false},\n labels: [\"Barcelona city\",\"Madrid sports\"],\n title: {\n text: \"Passing effectiveness.\"\n },\n subtitle: {\n text: 'Barcelona city vs Madrid sports.',\n align: 'left'\n },\n xaxis: {\n categories: []\n },\n grid: {\"show\":false},\n markers: {\"show\":false},\n legend: {\n show: true\n }\n }\n\n var chart = new ApexCharts(document.querySelector(\"#guinjybsvqhxearkzofwdmtcl\"), options);\n chart.render();\n\n</script>\n\n </body>\n </html>\n </main>\n</div>\n<!-- 2 -->" >
at <KeepAlive key=0 max=10 >
at <SpladeApp el= <div id="app" data-v-app>…</div> >
Level 29
Try to add the cdn in the head of your page
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Chart Sample</title>
<script src="{{ $chart->cdn() }}"></script>
</head>
Level 3
@gych still getting the same error
Level 104
@farirai I am really confused by your Blade template(s) - what is in the layout template if the first nested element is the doctype followed by <html> element???
Level 3
@tykus i even removed the layout when trying to fix but the error persists and x-layout has
<x-navigation />
<!-- 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">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ $header }}
</h2>
</div>
</header>
@endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
Level 104
@Farirai so where does the Vue application begin and end?
Level 3
@tykus if i remove the x-layout no vue app is being rendered but still face the same issue
Level 104
@Farirai so, where is the Vue application beginning and ending; how does it become initialized? If you still face the same issue, then there is a Vue application still?
Please or to participate in this conversation.