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

[jido]

Discussed in https://github.com/11ty/eleventy/discussions/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)