I have quite an odd error that I don't know how to fix and it has been stuck with me for the last 4 days. I made a Content Management System for my own website. I can add pages, blocks, and layouts. The error lies with the layouts.
Currently, I have 3 layouts in my Laravel layouts/layouts
folder. These are:
- app.blade.php (For the front page)
- backend.blade.php (For the admin panel as seen in the video)
- portal.blade.php (For the login/register screens)
I made a function where I can create, edit and delete my own layout files. I accomplished this by making files using the PHP fopen
function, filling them with the content using the fwrite
and fclose
function. This all works great, no problems there yet.
I want to use Vue in my system to make vue messages. And my console it says "Unknown element #app"
This is quite a common error which I know how to fix. You can fix this error by moving the script tag from the top of the file to the bottom.
When I do exactly that to my backend.blade.php
file using my own system. It works fine but whenever I click edit after I moved the script. I get a massive error that says invalid expression: Unexpected token '>'
This can be quite confusing so I made a video that demonstrates the issue: https://www.youtube.com/watch?v=AUOC9dMwD8s&feature=youtu.be
In the video, I'm comparing the exact same things but to two different layouts. P.S the quality of the video is still oncoming. Currently its 360p but I will be better
The code
Backend.blade.php
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="">
<title></title>
<script src=""></script>
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="" rel="stylesheet">
<link href="" rel="stylesheet">
<link href="" rel="stylesheet">
</head>
<body style="background: #ffffff">
<div class="">
<nav class="sidebar">
<ul class="list-unstyled">
<li class="sidebar-item title">Information</li>
<li class="sidebar-item"><a href="" class="sidebar-link ">Dashboard</a></li>
<li class="sidebar-item title">Content</li>
<li class="sidebar-item"><a href="" class="sidebar-link ">Pages</a></li>
<li class="sidebar-item"><a href="" class="sidebar-link ">Blocks</a></li>
<li class="sidebar-item"><a href="" class="sidebar-link ">Layouts</a></li>
<li class="sidebar-item title">System</li>
<li class="sidebar-item"><a href="" class="sidebar-link ">Users</a></li>
<li class="sidebar-item"><a href="" class="sidebar-link ">Roles</a></li>
<li class="sidebar-item title">Other</li>
<li class="sidebar-item"><a href="">Preferences</a></li>
</ul>
</nav>
<div class="dashboard-container">
<div id="app">
@yield('content')
</div>
</div>
</div>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
</body>
</html>
The edit view
@extends('layouts.layouts.backend')
@section('content')
<div class="container-fluid pt-5">
<div class="row">
<div class="col-md-12">
<h3>Create new layout</h3>
</div>
</div>
<div class="row my-5">
<div class="col-md-6">
<form method="POST" action="">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" name="name" value="">
</div>
<div class="form-group">
<label for="content" class="content">Content</label>
<textarea name="content" id="" class="form-control" cols="50" rows="20"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Edit layout</button>
</div>
</form>
</div>
</div>
</div>
@endsection
LayoutController.php create and edit functions
public function store(Request $request)
{
// Make name camelcase
$filename = Str::camel($request->name) . ".blade.php";
$file = fopen(resource_path('views/layouts/layouts/' . $filename), 'w');
if (is_resource($file)) {
fwrite($file, $request->content);
fclose($file);
}
$layout = new Layout();
$layout->name = $request->name;
$layout->filename = Str::camel($request->name) . ".blade.php";
$layout->content = $request->content;
$layout->save();
return redirect('dashboard/layouts');
}
public function update(Request $request, $id)
{
$layout = Layout::find($request->id);
$file = resource_path('views/layouts/layouts/' . $layout->filename);
file_put_contents($file, $request->content, FILE_IGNORE_NEW_LINES);
$newName = resource_path('views/layouts/layouts/' . Str::camel($request->name) . ".blade.php");
rename($file, $newName);
$layout->name = $request->name;
$layout->filename = Str::camel($request->name) . ".blade.php";
$layout->content = $request->content;
$layout->save();
return redirect('/dashboard/layouts');
}
Routes
Route::get('/dashboard/layouts', 'LayoutController@index')->name('layouts');
Route::get('/dashboard/layout/create', 'LayoutController@create')->name('create_layout');
Route::post('/dashboard/layout/store', 'LayoutController@store')->name('store_layout');
Route::get('/dashboard/layout/{id}/edit', 'LayoutController@edit')->name('edit_layout');
Route::delete('/dashboard/layout/{id}/delete', 'LayoutController@destroy')->name('delete_layout');
Route::patch('/dashboard/layout/{id}/update', 'LayoutController@update')->name('update_layout');
And the full script of the error (It is long)
app.js:38033 [Vue warn]: Error compiling template:
invalid expression: Unexpected token '>' in
"<!doctype html>\n<html lang=\""+_s(str_replace('_', '-', app()->getLocale()))+"\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n <meta name=\"csrf-token\" content=\""+_s(csrf_token())+"\">\n\n <title>"+_s(config('app.name', 'Laravel'))+"</title>\n\n <link rel=\"dns-prefetch\" href=\"//fonts.gstatic.com\">\n <link href=\"https://fonts.googleapis.com/css?family=Nunito\" rel=\"stylesheet\">\n\n <link href=\""+_s(asset('css/app.css'))+"\" rel=\"stylesheet\">\n <link href=\""+_s(asset('css/all.min.css'))+"\" rel=\"stylesheet\">\n <link href=\""+_s(asset('css/codemirror.css'))+"\" rel=\"stylesheet\">\n <link href=\""+_s(asset('css/styles.css'))+"\" rel=\"stylesheet\">\n</head>\n<body style=\"background: #ffffff\">\n<div class=\"\">\n <nav class=\"sidebar\">\n <ul class=\"list-unstyled\">\n <li class=\"sidebar-item title\">Information</li>\n <li class=\"sidebar-item\"><a href=\""+_s(route('home'))+"\" class=\"sidebar-link "+_s(Route::currentRouteNamed('home') ? 'sidebar-active' : '')+"\">Dashboard</a></li>\n <li class=\"sidebar-item title\">Content</li>\n <li class=\"sidebar-item\"><a href=\""+_s(route('pages'))+"\" class=\"sidebar-link "+_s(Route::currentRouteNamed('pages') ? 'sidebar-active' : '')+"\">Pages</a></li>\n <li class=\"sidebar-item\"><a href=\""+_s(route('blocks'))+"\" class=\"sidebar-link "+_s(Route::currentRouteNamed('blocks') ? 'sidebar-active' : '')+"\">Blocks</a></li>\n <li class=\"sidebar-item\"><a href=\""+_s(route('layouts'))+"\" class=\"sidebar-link "+_s(Route::currentRouteNamed('layouts') ? 'sidebar-active' : '')+"\">Layouts</a></li>\n <li class=\"sidebar-item title\">System</li>\n <li class=\"sidebar-item\"><a href=\""+_s(route('users'))+"\" class=\"sidebar-link "+_s(Route::currentRouteNamed('users') ? 'sidebar-active' : '')+"\">Users</a></li>\n <li class=\"sidebar-item\"><a href=\""+_s(route('roles'))+"\" class=\"sidebar-link "+_s(Route::currentRouteNamed('roles') ? 'sidebar-active' : '')+"\">Roles</a></li>\n <li class=\"sidebar-item title\">Other</li>\n <li class=\"sidebar-item\"><a href=\""+_s(route('preferences'))+"\">Preferences</a></li>\n </ul>\n </nav>\n\n <div class=\"dashboard-container\">\n<div id=\"app\">\n @yield('content')\n</div>\n </div>\n</div>\n<script src=\""+_s(asset('js/app.js'))+"\"></script>\n<script src=\""+_s(asset('js/jquery-ui.js'))+"\"></script>\n<script src=\""+_s(asset('js/Sortable.js'))+"\"></script>\n<script src=\""+_s(asset('js/jquery-sortable.js'))+"\"></script>\n<script src=\""+_s(asset('js/main.js'))+"\"></script>\n\n</body>\n</html>"
Raw expression: <!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="">
<title></title>
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="" rel="stylesheet">
<link href="" rel="stylesheet">
<link href="" rel="stylesheet">
<link href="" rel="stylesheet">
</head>
<body style="background: #ffffff">
<div class="">
<nav class="sidebar">
<ul class="list-unstyled">
<li class="sidebar-item title">Information</li>
<li class="sidebar-item"><a href="" class="sidebar-link ">Dashboard</a></li>
<li class="sidebar-item title">Content</li>
<li class="sidebar-item"><a href="" class="sidebar-link ">Pages</a></li>
<li class="sidebar-item"><a href="" class="sidebar-link ">Blocks</a></li>
<li class="sidebar-item"><a href="" class="sidebar-link ">Layouts</a></li>
<li class="sidebar-item title">System</li>
<li class="sidebar-item"><a href="" class="sidebar-link ">Users</a></li>
<li class="sidebar-item"><a href="" class="sidebar-link ">Roles</a></li>
<li class="sidebar-item title">Other</li>
<li class="sidebar-item"><a href="">Preferences</a></li>
</ul>
</nav>
<div class="dashboard-container">
<div id="app">
@yield('content')
</div>
</div>
</div>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
</body>
</html>
1 | <div id="app">
| ^^^^^^^^^^^^^^
2 | <div class="container-fluid pt-5">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
3 | <div class="row">
| ^^^^^^^^^^^^^^^^^^^^^^^^^
4 | <div class="col-md-12">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
5 | <h3>Create new layout</h3>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
6 | </div>
| ^^^^^^^^^^^^^^^^^^
7 | </div>
| ^^^^^^^^^^^^^^
8 | <div class="row my-5">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
9 | <div class="col-md-6">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
10 | <form method="POST" action="http://rainierlaan.test/dashboard/layout/2/update">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
11 | <input type="hidden" name="_token" value="DlQUf462IpDoZt38qrjK2vU527jQTyjrwg0mkq6D">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
12 | <input type="hidden" name="_method" value="PATCH">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
13 | <div class="form-group">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
14 | <label for="name">Name</label>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
15 | <input type="text" class="form-control" name="name" value="backend">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
16 | </div>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
17 | <div class="form-group">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
18 | <label for="content" class="content">Content</label>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
19 | <textarea name="content" id="" class="form-control" cols="50" rows="20"><!doctype html>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
20 | <html lang="">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
21 | <head>
| ^^^^^^^^^^^^
22 | <meta charset="utf-8">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
23 | <meta name="viewport" content="width=device-width, initial-scale=1">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
24 |
|
25 | <meta name="csrf-token" content="">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
26 |
|
27 | <title></title>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
28 |
|
29 | <link rel="dns-prefetch" href="//fonts.gstatic.com">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
30 | <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
31 |
|
32 | <link href="" rel="stylesheet">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
33 | <link href="" rel="stylesheet">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
34 | <link href="" rel="stylesheet">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
35 | <link href="" rel="stylesheet">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
36 | </head>
| ^^^^^^^^^^^^^
37 | <body style="background: #ffffff">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
38 | <div class="">
| ^^^^^^^^^^^^^^^^^^^^
39 | <nav class="sidebar">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
40 | <ul class="list-unstyled">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
41 | <li class="sidebar-item title">Information</li>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
42 | <li class="sidebar-item"><a href="" class="sidebar-link ">Dashboard</a></li>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
43 | <li class="sidebar-item title">Content</li>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
44 | <li class="sidebar-item"><a href="" class="sidebar-link ">Pages</a></li>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
45 | <li class="sidebar-item"><a href="" class="sidebar-link ">Blocks</a></li>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
46 | <li class="sidebar-item"><a href="" class="sidebar-link ">Layouts</a></li>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
47 | <li class="sidebar-item title">System</li>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
48 | <li class="sidebar-item"><a href="" class="sidebar-link ">Users</a></li>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
49 | <li class="sidebar-item"><a href="" class="sidebar-link ">Roles</a></li>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
50 | <li class="sidebar-item title">Other</li>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
51 | <li class="sidebar-item"><a href="">Preferences</a></li>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
52 | </ul>
| ^^^^^^^^^^^^^^^^^^^
53 | </nav>
| ^^^^^^^^^^^^^^^^
54 |
|
55 | <div class="dashboard-container">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
56 | <div id="app">
| ^^^^^^^^^^^^^^^^^^^^
57 | @yield('content')
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^
58 | </div>
| ^^^^^^^^^^^^
59 | </div>
| ^^^^^^^^^^^^^^^^
60 | </div>
| ^^^^^^^^^^^^
61 | <script src=""></script>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
62 | <script src=""></script>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
63 | <script src=""></script>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
64 | <script src=""></script>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
65 | <script src=""></script>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
66 |
|
67 | </body>
| ^^^^^^^^^^^^^
68 | </html></textarea>
| ^^^^^^^^^^^^^^^^^^^^^^^^
69 | </div>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
70 | <div class="form-group">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
71 | <button type="submit" class="btn btn-primary">Edit layout</button>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
72 | </div>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
73 | </form>
| ^^^^^^^^^^^^^^^^^^^^^^^
74 | </div>
| ^^^^^^^^^^^^^^^^^^
75 |
|
76 | </div>
| ^^^^^^^^^^^^^^
77 | </div>
| ^^^^^^^^^^
78 | </div>
| ^^^^^^
(found in <Root>)
warn @ app.js:38033
app.js:46463 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
/favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire