Level 122
you did not @endsection title
Apr 5, 2020
20
Level 1
Blade component render in view causes "syntax error, unexpected 'endif' (T_ENDIF), expecting end of file"
I'm trying to figure out how to set up a Blade component. I ran php artisan make:component Hero, then adjusted some files (shown below).
When I try to render the component in a view, however, I get a strange syntax error, unexpected 'endif' (T_ENDIF), expecting end of file error. I have no idea what the problem is, and would appreciate any help. (The pages display if the component is removed.)
In resources/views/components/hero.blade.php:
<!--
Page Hero
-->
<section id = "hero" style = 'background-image: url("{{ $bg }}")' {{ $attributes }}>
<div>
<div>
<h1>{{ $h1 }}</h1>
<p>{{ $slot }}</p>
</div>
<!-- Whitespace Div -->
<div class = "w-full md:w-1/3"></div>
</div>
</section>
In app/View/Components/Hero.php:
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class Hero extends Component
{
/**
* The hero title.
*
* @var string
*/
public $h1;
/**
* The hero background image.
*
* @var string
*/
public $bg;
/**
* Create the component instance.
*
* @param string $h1
* @param string $bg
* @return void
*/
public function __construct($h1, $bg)
{
$this->h1 = $h1;
$this->bg = $bg;
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\View\View|string
*/
public function render()
{
return view('components.hero');
}
}
I'm trying to render it in resources/views/index.blade.php as:
@extends('layouts.app')
@section('title', 'Dashboard')
<x-hero :bg = "{{ App\Bg::$subtle_prism_indigo }}">
<x-slot name = 'h1'>
Some title
</x-slot>
Some paragraph
<!-- something commented -->
</x-hero>
@section('content')
<!-- what comes after isn't important; the page renders if I delete <x-hero> -->
FYI: I did not bootstrap the component. App\Bg is working in the application, so I do not think it's causing the trouble with the component. My package.json is below, if the version is a problem:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^7.0",
"jquery": "^3.2",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"tailwindcss": "^1.2.0"
}
}
Level 1
According to https://laravel.com/docs/7.x/blade#extending-a-layout, having no @endsection for a one-line @section('name', 'content') shouldn't be a problem; it's always worked before for me...
Level 122
so, then your component is not in a section?
Level 1
Ohhh...no, it wasn't in a section. I just fixed that but I'm still getting the syntax error.
Level 75
Remember sometimes you need to clear cache between program changes. Browser and view. That has got me more than once.
Level 1
The only cache I know of (Chrome developer tools -> Network -> Disable cache) is disabled. Is there another cache I should be aware of?
Level 122
He's talking about the view cache These are rendered versions of your view files in the storage folder.
When working on blade components, you need to clear the view cache each time you test.
Level 1
Ahh ok, I see. I've cleared the view cache and restarted the server, but I'm still getting the syntax error.
Level 1
This isn't exactly a "solution", but it's a workaround that's good enough for what I need.
- I emptied
app/View/Components/Hero.php(reverted it to its default). -
resources/views/components/hero.blade.phpstayed the same - In
resources/views/index.blade.php, myherocomponent looked like this:
<x-hero>
@slot('bg', $bg) <!-- slots from Laravel 6.x -->
@slot('h1', 'Some title')
Some paragraph
<!-- a comment -->
</x-hero>
I still don't know why I get a strange unexpected @endif error if I try <x-hero h1 = 'Some title'>, or why <x-slot>s don't work, but the above workaround is sufficient for me right now.
Level 17
I had this issue the other day. It has to do with how you are calling your x-hero component in index.blade.php. If you want to pass a variable or dynamic expression to the component you need to remove the {{}} from around the variable as the ":" before tells blade that whatever is in the quotes is php hence don't need the {{}} echo tags.
<x-hero :bg="App\Bg::$subtle_prism_indigo"
See here in the docs: https://laravel.com/docs/master/blade#passing-data-to-components
2 likes
Level 1
Ahh, ok I see. Good point. My code doesn't work for regular slots either, though. (e.g. <x-hero h1 = 'Some title'>) I really don't know what's going on.
Level 17
Can you try removing the spaces from between your attributes and their values?
<x-hero h1='Some Title'
The blade component compiler might not be able to handle those correctly? I know it works for me without the spaces
5 likes
Level 17
Also as a side note, if you are only passing your h1 and background image into the component and it doesn't actually need any view specific logic, try changing to an anonymous component.
You can delete the "app/View/Components/Hero.php". Then at the top of "resources/views/components/hero.blade.php" put:
@props(['bg'])
I don't think you need to specify "h1" as a prop though as you are using it as a named slot.
Level 1
The removing spaces worked. Thanks a bunch!
1 like
Level 2
For others who landed here for single line components, don't forget to close your component with a slash />
Level 2
@JoshuaD This just saved me a lot of head scratching. Thank you!!
Level 10
For those still having a problem with this... Here is a solution I found for this:
in your app layout use:
<title>{{ $title ?? config('app.name', 'Laravel') }}</title>
and on your pages:
<x-slot name="title">Our new page title</x-slot>
source:
https://joshhanley.com.au/articles/how-to-structure-your-layout-file-for-livewire
Level 1
I had a similar problem and I'm not sure if it's related to your problem but let me post here what I've found.
I had a component like this:
<x-link href="{{ route("lessons.present", $lesson) }}">
<x-icon.presentation-chart-line class="h-6 w-6"/>
</x-link>
I was getting the same error. After some time I realized that double quotes were causing the issue in route so I've fixed it by replacing it with single quotes:
<x-link href="{{ route('lessons.present', $lesson) }}">
<x-icon.presentation-chart-line class="h-6 w-6"/>
</x-link>
1 like
@amirami Thanks, this is it. How many times and how many developers (including me) have suffered from this obnoxious user mis-placed or mis-typed symbol error ? Usually in such cases compilers/interpreters errors are VERY cryptic (can't parse, blah blah blah...), but the problem itself is very simple in human terms. I wish that compiler itself could guess more exact location of an error in a cases like these, so that it could assist us-developers better. Maybe compiler developers need to include deep neural networks at least or something so that code parsing would be more human-like and noticing errors would be more human-friendly ? Because spending hours after seeing "EXPECTING EOF" by analyzing what it expects and where and why,- is simply unreasonable.
Level 1
I found this thread whilst getting a very similar error - notably this is the opposite of the typical 'unexpected end of file' and it's complaining that it was expecting EOF but got an @endif... In the end I had to narrow mine down to commenting out chunks of my form until I found the bit that was breaking and then it became a bit clearer as to the problem,
In my case (and I hope this may help someone else in the future), I have the following:
<div class="mt-4">
<x-jet-label class="font-bold text-pmp_dark_green" for="sort_code" value="{{ __('Sort Code (without dashes') }}" />
<x-jet-input id="sort_code" class="block mt-1 w-full" placeholder="e.g. 010203" maxlength="6" type="text" name="sort_code" :value="old('sort_code')" required autofocus autocomplete="sort_code" />
</div>
Curiously it was the __() (i.e. Translate) function which was breaking. I had omitted a closing bracket in my text for the label's value of Sort Code without dashes, which really shouldn't be a problem becasue it is a single-quoted text string and therefore a literal open bracket and not code.
But somewhere in the translation or Blade parsing it was interpreting that bracket in a code-like manner and exploding with this blade parsing error (also citing an impossibly high line number like line 500 in a template which about 100 lines long). As soon as I added the closing bracket to my text it all worked fine again, although I then chose to do away with the brackets completely just to be safe.
Please or to participate in this conversation.