I am available for hire!

Blog css eleventy 11ty

Migrating to Eleventy 2.0

Last week I finally upgraded my Eleventy instance after using version 0.12.1 for over a year. I tried to do this earlier but always gave up because I stumbled upon this or that issue. This time was no different, but I was determined to resolve all problems.


The primary issue when updating to the new Eleventy was my templating language - Liquid. I chose Liquid because I am familiar with it since I work with Jekyll and Shopify every now and then.

The first issue that occurred was:

illegal filename "undefined" (via AssertionError)

After a quick investigation, I decided to switch to my own instance of Liquid library, as documented on the Eleventy site.

I added the following code:

const { Liquid } = require("liquidjs");

module.exports = (eleventyConfig) => {
let options = {
extname: ".liquid",
dynamicPartials: false,
strictFilters: false,
jsTruthy: true,
root: ["site/_layouts"]

eleventyConfig.setLibrary("liquid", new Liquid(options));

The most important part here is the dynamicPartials: false setting which resolves common pitfalls if you include partials without quotation marks.

Next issue was:

unexpected token at "{{ read.date ..." (via AssertionError)

I was using a variable inside the assign statement in Liquid, like so:

{% assign readHref = {{ read.date }} | prepend: '#' %}

All I had to do is to remove the curly brackets around the variable:

{% assign readHref = read.date | prepend: '#' %}

The final issue I had was:

Failed to lookup "../../assets/dist/css/devcards.min.css" in "site/_layouts" (via Error)

Apparently, Liquid can only look up files within the root folder defined in the configuration. The workaround was to define a new custom Liquid filter that returns the content of the file like so:

eleventyConfig.addLiquidFilter('getCritical', (critical) => {
return fs.readFileSync(`./assets/dist/css/${critical}.critical.min.css`)

And that's it. After resolving these issues, I could finally use the new version of the Eleventy static site generator.

Latest Last.fm tracks:

♬ See the full Last.fm profile