Half of the time, front matter is not fully processed with live reload

[jido]

Discussed in #3548

^{Originally posted by jido November 20, 2024}
I am not sure why that happens. Look for the slug "an-article-n-1" in these two updates:

% npm start

> lesson1@1.0.0 start
> npm-run-all build:sass --parallel watch:*


> lesson1@1.0.0 build:sass
> sass src/sass:src/css


> lesson1@1.0.0 watch:eleventy
> eleventy --serve


> lesson1@1.0.0 watch:sass
> sass --watch src/sass:src/css

Sass is watching for changes. Press Ctrl-C to stop.

[11ty] Writing ./public/articles/{{ article.slug }}/index.html from ./src/articles.mi (mi)
[11ty] Writing ./public/index.html from ./src/index.md (mi)
[11ty] Writing ./public/blog/first-post/index.html from ./src/blog/first-post.md (liquid)
[11ty] Writing ./public/blog/second-post/index.html from ./src/blog/second-post.md (liquid)
[11ty] Writing ./public/articles/an-article-n-2/index.html from ./src/articles.mi (mi)
[11ty] Writing ./public/articles/an-article-n-3/index.html from ./src/articles.mi (mi)
[11ty] Copied 2 Wrote 6 files in 0.60 seconds (v3.0.0)
[11ty] Watching…
[11ty] Server at http://localhost:8080/
[11ty] File changed: src/blog/blog.json
[11ty] Writing ./public/articles/an-article-n-1/index.html from ./src/articles.mi (mi)
[11ty] Writing ./public/index.html from ./src/index.md (mi)
[11ty] Writing ./public/blog/first-post/index.html from ./src/blog/first-post.md (liquid)
[11ty] Writing ./public/blog/second-post/index.html from ./src/blog/second-post.md (liquid)
[11ty] Writing ./public/articles/an-article-n-2/index.html from ./src/articles.mi (mi)
[11ty] Writing ./public/articles/an-article-n-3/index.html from ./src/articles.mi (mi)
[11ty] Copied 2 Wrote 6 files in 0.58 seconds (v3.0.0)
[11ty] Watching…

My config:

var mistigri = require("mistigri")

module.exports = function(eleventyConfig) {
  
  eleventyConfig.addWatchTarget("./src/sass")
  eleventyConfig.addPassthroughCopy("./src/css")
  
  eleventyConfig.addTemplateFormats("mi")
  
  let mistigriEngine = {
    compile: (inputContent) => {
      return async (data) => mistigri.prrcess(inputContent, {
        ...data, 
        makeurl: ({from}) => eleventyConfig.getFilter("url")(from),
        makeslug: ({from}) => eleventyConfig.getFilter("slugify")(from)
      })
    }
  }
  
  eleventyConfig.addExtension("mi", mistigriEngine)
  
  return {
    dir: {
      input: "src",
      output: "public",
    }
  }
}

And articles.mi:

---
pagination:
  data: "cms"
  size: 1
  alias: "article"
  addAllPagesToCollections: true
layout: "base.mi"
tags: "articles"
permalink: "/articles/{{ article.slug }}/"
templateEngineOverride: "mi, md"
eleventyComputed:
  title: "{{ article.title }}"
---

{{ article.body }}

And _data/cms.js:

module.exports = () => {
  return [
  {
    id: 1,
    title: "An article n°1",
    slug: "an-article-n-1",
    body: "Writing an interesting article is hard."
  },
  {
    id: 2,
    title: "An article n°2",
    slug: "an-article-n-2",
    body: "Dogs, spiders and pythons are some examples of living beings."
  },
  {
    id: 3,
    title: "An article n°3",
    slug: "an-article-n-3",
    body: "Yesterday was Sunday. I believe today is a new Tuesday."
  },
  ]
}

Update

I tried replacing "article.slug" with a function call that logs, and I can see it is called four times for each article -- once without article data.

slug An article n°1
slug An article n°2
slug An article n°3
slug null
slug An article n°1
slug An article n°1
slug Writing an interesting article is hard.
slug null
slug An article n°2
slug An article n°2
slug Dogs, spiders and pythons are some examples of living beings.
slug null
slug An article n°3
slug An article n°3
slug Yesterday was Sunday. I believe today is a new Tuesday.

In the front matter:

permalink: "/articles/{{ makeslug from = article.title }}/"
eleventyComputed:
  title: "{{ article.title }}"
  foo: "{{ makeslug from = article.body }}"

But when the slug is not rendered correctly there are less calls:

slug null
slug Writing an interesting article is hard.
slug null
slug An article n°2
slug An article n°2
slug Dogs, spiders and pythons are some examples of living beings.
slug null
slug An article n°3
slug An article n°3
slug Yesterday was Sunday. I believe today is a new Tuesday.
[11ty] Writing ./public/index.html from ./src/index.md (mi)
[11ty] Writing ./public/articles/{{ makeslug from = article.title }}/index.html from ./src/articles.mi (mi)
[11ty] Writing ./public/articles/an-article-n-2/index.html from ./src/articles.mi (mi)
[11ty] Writing ./public/articles/an-article-n-3/index.html from ./src/articles.mi (mi)

You can see the function was never called with the article title. I even replaced the template engine with a compile function that just logs, and again I can see times when the first article permalink is never rendered.

    compile: (inputContent) => {
      return async (data) => {console.log(inputContent); console.log("Data = " + data); console.log(data.article); return inputContent;}
    }

The data in eleventyComputed doesn't seem to exhibit the same behaviour.

[jido]

Here is a minimal reproduction (note: base64 encoded because of the file picker here.)

demo.tbz.txt

Output:

% npm run build    

> repro@1.0.0 build
> npx @11ty/eleventy


Title: Article 1
{{ article.title }}

Title: Article 2
/articles/{{ article.slug }}/

Title: Article 2
/articles/{{ article.slug }}/

Title: Article 2
{{ article.title }}

Title: Article 3
/articles/{{ article.slug }}/

Title: Article 3
/articles/{{ article.slug }}/

Title: Article 3
{{ article.title }}

Title: Article 1
{{ article.body }}


Title: Article 2
{{ article.body }}


Title: Article 3
{{ article.body }}

[11ty] Writing ./public/articles/{{ article.slug }}/index.html from ./src/articles.demo (demo)
[11ty] Writing ./public/Article_2/index.html from ./src/articles.demo (demo)
[11ty] Writing ./public/Article_3/index.html from ./src/articles.demo (demo)
[11ty] Wrote 3 files in 0.08 seconds (v3.0.0)

[zachleat]

I suspect this may have been resolved in #3850, can you retest with v3.1.2-beta.1 or newer?

[jido]

Can you help me with upgrading to v3.1.2-beta.3? I tried changing it in package.json but that does not seem to have any effect.

Update: resolved by running
npm install @11ty/eleventy@3.1.2-beta.3

[jido]

The new behaviour I see is that it is consistently not inserting the slug...

[11ty] Problem writing Eleventy templates:
[11ty] Output conflict: multiple input files are writing to ./public/articles/{{ article.slug }}/index.html. Use distinct permalink values to resolve this conflict.
[11ty] 1. ./src/articles.demo
[11ty] 2. ./src/articles.demo
[11ty] 3. ./src/articles.demo (via DuplicatePermalinkOutputError)

[jido]

I guess putting permalink in the eleventyComputed section did not work in v3.1.0. It works fine now and resolves my issue.