Raymond Camden

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.

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:

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.

Cool! Except when it starts, I get this:

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!