Error while compiling ejs

This is the message that I’m getting,

SyntaxError: Unexpected token } in /workspace/YelpCamp/v10/views/campgrounds/show.ejs while compiling ejs

If the above error is not helpful, you may want to try EJS-Lint:
https://github.com/RyanZim/EJS-Lint
Or, if you meant to create an async function, pass `async: true` as an option.
    at new Function (<anonymous>)
    at Template.compile (/workspace/YelpCamp/v10/node_modules/ejs/lib/ejs.js:662:12)
    at Object.compile (/workspace/YelpCamp/v10/node_modules/ejs/lib/ejs.js:396:16)
    at handleCache (/workspace/YelpCamp/v10/node_modules/ejs/lib/ejs.js:233:18)
    at tryHandleCache (/workspace/YelpCamp/v10/node_modules/ejs/lib/ejs.js:272:16)
    at View.exports.renderFile [as engine] (/workspace/YelpCamp/v10/node_modules/ejs/lib/ejs.js:489:10)
    at View.render (/workspace/YelpCamp/v10/node_modules/express/lib/view.js:135:8)
    at tryRender (/workspace/YelpCamp/v10/node_modules/express/lib/application.js:640:10)
    at Function.render (/workspace/YelpCamp/v10/node_modules/express/lib/application.js:592:3)
    at ServerResponse.render (/workspace/YelpCamp/v10/node_modules/express/lib/response.js:1012:7)
    at /workspace/YelpCamp/v10/routes/campgrounds.js:57:8
    at /workspace/YelpCamp/v10/node_modules/mongoose/lib/model.js:4863:16
    at /workspace/YelpCamp/v10/node_modules/mongoose/lib/helpers/promiseOrCallback.js:24:16
    at /workspace/YelpCamp/v10/node_modules/mongoose/lib/model.js:4886:21
    at _hooks.execPost (/workspace/YelpCamp/v10/node_modules/mongoose/lib/query.js:4397:11)
    at /workspace/YelpCamp/v10/node_modules/kareem/index.js:136:16

Here is my show.ejs file,

<%- include("../partials/header")%>
<div class="container">
	<div class="row">
		<div class="col-md-3">
			<p class="lead">YelpCamp</p>
			<div class="list-group">
				<li class="list-group-item active">Info 1</li>
				<li class="list-group-item">Info 2</li>
				<li class="list-group-item">Info 3</li>
			</div>
		</div>
		<div class="col-md-9">
			<div class="thumbnail">
				<img class="img-responsive" src="<%=campground.image%>">
				<div class="caption-full">
					<h4 class="pull-right">$9.00/Night</h4>
					<h4><a><%=campground.name%></a></h4>
					<p><%= campground.description %></p>
					<p>
						<em>Submitted By -<%= campground.author.username %></em>
					</p>
					<% if(currentUser && campground.author.id.equals(currentUser._id)){ %>
						<a class="btn btn-xs btn-warning"  href="/campgrounds/<%= campground._id %>/edit">Edit</a>
						<form id="delete-form" action="/campgrounds/<%= campground._id %>?_method=DELETE" method="POST">
							<button class="btn btn-xs btn-danger">Delete</button>
						</form>
					<% } %>
				</div>
			</div>
			<div class="well">
				<div class="text-right">
					<a class="btn btn-success" href="/campgrounds/<%= campground._id %>/comments/new">Add new Comment</a>
				</div>
				<hr>
				<% campground.comments.forEach(function(comment){ %>
					<div class="row">
						<div class="col-md-12">
							<strong><%= comment.author.username.toUpperCase() %></strong>
							<span class="pull-right">10 days ago</span>
							<p>
								<%= comment.text %>
							</p>
							<a class="btn btn-xs btn-warning" 
							   href="/campgrounds/<%= campground._id %>/comments/<%= comment._id %>/edit">
								Edit
							</a>
							<form class="delete-form" action="/campgrounds/<%= campground._id %>/comments/<%= comment._id %>?_method=DELETE" method="POST">
								<input type="submit" class="btn btn-xs btn-danger" value="Delete">
							</form>
						</div>
					</div>
				<%- }) %>
			</div>
		</div>
	</div>
</div>



<%- include("../partials/footer")%>

Is there any error in my ejs syntax or something else? :roll_eyes:

Hi @Plabon_Kumer_Sarker !

Have you checked the source code for yelp camp and matched it with yours?
Colte Steele probably has the full code posted on github since this is a pretty popular project.

1 Like

I think the dash (-) is what’s causing the error.

1 Like

Absolutely,
But, Now getting different error,

TypeError: /workspace/YelpCamp/v10/views/campgrounds/show.ejs:22
    20| 						<em>Submitted By -<%= campground.author.username %></em>
    21| 					</p>
 >> 22| 					<% if(currentUser && campground.author.id.equals(currentUser._id)){ %>
    23| 						<a class="btn btn-xs btn-warning"  href="/campgrounds/<%= campground._id %>/edit">Edit</a>
    24| 						<form id="delete-form" action="/campgrounds/<%= campground._id %>?_method=DELETE" method="POST">
    25| 							<button class="btn btn-xs btn-danger">Delete</button>

Cannot read property 'equals' of undefined
    at eval (eval at compile (/workspace/YelpCamp/v10/node_modules/ejs/lib/ejs.js:662:12), <anonymous>:25:47)
    at show (/workspace/YelpCamp/v10/node_modules/ejs/lib/ejs.js:692:17)
    at tryHandleCache (/workspace/YelpCamp/v10/node_modules/ejs/lib/ejs.js:272:36)
    at View.exports.renderFile [as engine] (/workspace/YelpCamp/v10/node_modules/ejs/lib/ejs.js:489:10)
    at View.render (/workspace/YelpCamp/v10/node_modules/express/lib/view.js:135:8)
    at tryRender (/workspace/YelpCamp/v10/node_modules/express/lib/application.js:640:10)
    at Function.render (/workspace/YelpCamp/v10/node_modules/express/lib/application.js:592:3)
    at ServerResponse.render (/workspace/YelpCamp/v10/node_modules/express/lib/response.js:1012:7)
    at /workspace/YelpCamp/v10/routes/campgrounds.js:57:8
    at /workspace/YelpCamp/v10/node_modules/mongoose/lib/model.js:4863:16
    at /workspace/YelpCamp/v10/node_modules/mongoose/lib/helpers/promiseOrCallback.js:24:16
    at /workspace/YelpCamp/v10/node_modules/mongoose/lib/model.js:4886:21
    at _hooks.execPost (/workspace/YelpCamp/v10/node_modules/mongoose/lib/query.js:4397:11)
    at /workspace/YelpCamp/v10/node_modules/kareem/index.js:136:16
    at process._tickCallback (internal/process/next_tick.js:61:11)

The error is self explanatory:
campground.author.id is undefined. Maybe you forgot to set it, maybe it’s _id and not id.
Without seeing the rest of the code hard to tell.

1 Like

So I think what’s going on here is that id is undefined. So the author property might not have an id. Maybe it’s underscore id.

What I like to do when I run into these errors is JSON.stringify the part that is having trouble. Maybe you can comment out the line with the if and replace it temporarily with the statement below to see if what is inside the author.

 <%- JSON.stringify(campground.author) %>

I hope that helps. :slight_smile:

1 Like

@phptuts @jenovs Thank you so much, it’s working :relaxed:
I used this,

<% if(currentUser && JSON.stringify(campground.author.id) === currentUser._id){ %>

instead of this,

But why Document.prototype.equals() not working here? :roll_eyes:

Because you’re not passing to the template a Document, but a regular JS object.

1 Like

I did try to check. But, the source code was for the final YelpCamp and I didn’t reach that level yet. That’s why my code and source code has a big difference :confused:

You can always check commit history: Commits · Colt/YelpCamp · GitHub

2 Likes

Also, are you building this with the udemy video?

Maybe you can pause the video and check your code with the current part of the video.

1 Like