Quick Tips for Eleventy and Vercel

Quick Tips for Eleventy and Vercel

I primarily use Netlify for my Jamstack hosting service, but I also make use of Vercel quite a bit as well. Vercel's CLI is quite nice and tends to be a bit more intelligent about figuring out your site's requirements with little to no configuration. Other things, like their serverless functions, are a bit easier to use as well. That being said, I've recently run into a small issue with Eleventy and Vercel that I thought I'd share in case others hit as well. It isn't a bug, but a combination of a few things together that may trip you up.

To start, I create a two file Eleventy site. It's got a home page:


<h1>Cats</h1>

<ul>
{% for cat in cats %}
<li>{{cat.name}}</li>
{% endfor %}
</ul>

All I'm doing here is iterating over an array of cats. That data comes from _data/cats.json:

[
	{"name":"Luna"},
	{"name":"Cracker"},
	{"name":"Pig"},
	{"name":"Aleese"},
	{"name":"Sammy"}
]

Just to confirm it works, I ran eleventy --serve and hit the page in my browser.

HTML listing of cats

Awesome, right? Ok, so if I want to run this with Vercel and use it's local dev server, I'd probably try: vercel dev. However, doing so will result in this:

The CLI doesn't know the framework.

Notice how it doesn't recognize the framework? That's because, at least for me, I use my globally installed Eleventy CLI and do not install it locally. I may be in the minority for that, but that's typically how I role. Luckily it's easy enough to fix. First I'll do an npm init -f to create a blank package.json. Next I'll do a npm i --save @11ty/eleventy to set Eleventy as a dependency. Now if I run vercel dev, it recognizes that I'm using Eleventy.

CLI picks up on Eleventy

Cool! Except when it starts, I get this:

Error on startup

It may be a bit hard to read in the screen shot, but here's some of the relevant bits:


`TemplateContentRenderError` was thrown
> Having trouble compiling template ./node_modules/liquidjs/README.md


Notice how the error is being thrown in a file in node_modules? Why?

By default, Eleventy ignores the node_modules folder, which is a good thing. However, if you have a .gitignore file, this feature isn't enabled (unless it's empty). This is documented of course. So what happened? The Vercel CLI creates a .gitignore file if you don't have one. It does this to tell Git to ignore the .vercel folder it creates.

So now you have a .gitignore file and Eleventy won't ignore node_modules anymore. The fix, of course, is to just add it:

.vercel
node_modules

This will also speed up your development server as it's ignoring the ten billion or so files under node_modules.

As I said, none of this is a bug, but it's tripped me up a few times now so I thought I'd share!

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com