Breaking: js-yaml bump from v3 to v4 for better error messaging for tabs versus spaces in YAML front matter

[cfjedimaster]

Describe the bug
Hi, sorry for the double post. I added this to the Discussions board (#2118) thinking maybe I did something simple (and wrong ;) but I haven't seen any responses yet so perhaps it's a proper bug.

My first serverless test is failing because even though netlify.toml is created (once), the redirects are never added. I just have a blank netlify.toml file.

My config:

const { EleventyServerlessBundlerPlugin } = require("@11ty/eleventy");

module.exports = function(eleventyConfig) {


  eleventyConfig.addPlugin(EleventyServerlessBundlerPlugin, {
    name: "weather", 
    functionsDir: "./netlify/functions/"
  });
	

};

Output from running npx eleventy:

[11ty] Writing _site/index.html from ./index.liquid
[11ty] Writing _site/weather/index.html from ./weather.liquid
[11ty] Serverless: 2 files bundled to ./netlify/functions/weather.
[11ty] Wrote 2 files in 0.04 seconds (v1.0.0-beta.8)

As I said, if I remove netlify.toml, it gets generated, but it's empty. My serverless function was created thoujgh.

Environment:

• OS and Version: [e.g. Windows/Mac/Linux] WSL
• Eleventy Version [via eleventy --version or npx @11ty/eleventy --version] 1.0.0-beta.8

[cfjedimaster]

So this turned out to be a tab in my front matter. I swear I remember Eleventy throwing errors (or messages) in the past when it detected a tab in front matter, so is it a bug that the error wasn't shown?

[solution-loisir]

I had the same problem yesterday. I couldn't figure out why. I added the redirect manually.

[pepelsbey]

It happened to me as well 😔

I got an error that wasn’t helpful. Tabs in the front matter caused it (indent before title):

---
eleventyComputed:
	title: '{{ global.title }}'
layout: index.njk
permalink: index.html
---

Here’s the log

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] Cannot read properties of null (reading 'permalink') (via TypeError)
[11ty] 
[11ty] Original error stack trace: TypeError: Cannot read properties of null (reading 'permalink')
[11ty]     at TemplateBehavior.setRenderViaDataCascade (~/node_modules/@11ty/eleventy/src/TemplateBehavior.js:45:64)
[11ty]     at Template.getTemplateMapEntries (~/node_modules/@11ty/eleventy/src/Template.js:995:19)
[11ty]     at TemplateMap.add (~/node_modules/@11ty/eleventy/src/TemplateMap.js:62:36)
[11ty]     at async Promise.all (index 5)
[11ty]     at async TemplateWriter._createTemplateMap (~/node_modules/@11ty/eleventy/src/TemplateWriter.js:243:5)
[11ty]     at async TemplateWriter.generateTemplates (~/node_modules/@11ty/eleventy/src/TemplateWriter.js:277:5)
[11ty]     at async TemplateWriter.write (~/node_modules/@11ty/eleventy/src/TemplateWriter.js:324:23)
[11ty]     at async Eleventy.executeBuild (~/node_modules/@11ty/eleventy/src/Eleventy.js:1108:13)
[11ty]     at async Eleventy._watch (~/node_modules/@11ty/eleventy/src/Eleventy.js:707:24)
[11ty]     at async watchRun (~/node_modules/@11ty/eleventy/src/Eleventy.js:955:9)
[11ty] Wrote 0 files in 0.02 seconds (v2.0.0-canary.12)

I wonder if it’s possible to allow tabs in the front matter, instead of throwing errors. I know, I know…

YAML doesn’t allow literal tab characters for indentation

But it would make 11ty friendlier to any code style. Right now if you want to use tabs in your project, you have to mix them with spaces only for the front matter. Unfortunately, such a mix is impossible to configure or test via EditorConfig.

[nfriedly]

Yes, that was a very confusing error - thank you for posting the log @pepelsbey or I might never have figured it out.

[uncenter]

Wouldn't this be an upstream issue for https://github.com/jonschlinkert/gray-matter, which handles the front matter parsing for Eleventy?

[nfriedly]

Why not both? Eleventy could give an error message along the lines of "Error parsing frontmatter in file XYZ", and gray-matter could give an error message about mixing tabs and spaces.

[zachleat]

There was an obscure internal regression in the error messaging here. I patched it up and @pepelsbey’s test above reported the following expected error:

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble reading front matter from template ./index.njk (via TemplateContentFrontMatterError)
[11ty] 2. end of the stream or a document separator is expected at line 3, column 4:
[11ty]          hi: 1
[11ty]        ^ (via YAMLException)
[11ty] 
[11ty] Original error stack trace: YAMLException: end of the stream or a document separator is expected at line 3, column 4:
[11ty]          hi: 1
[11ty]        ^
[11ty]     at generateError (/Users/zachleat/Code/eleventy/node_modules/gray-matter/node_modules/js-yaml/lib/js-yaml/loader.js:167:10)
[11ty]     at throwError (/Users/zachleat/Code/eleventy/node_modules/gray-matter/node_modules/js-yaml/lib/js-yaml/loader.js:173:9)
[11ty]     at readDocument (/Users/zachleat/Code/eleventy/node_modules/gray-matter/node_modules/js-yaml/lib/js-yaml/loader.js:1545:5)
[11ty]     at loadDocuments (/Users/zachleat/Code/eleventy/node_modules/gray-matter/node_modules/js-yaml/lib/js-yaml/loader.js:1588:5)
[11ty]     at load (/Users/zachleat/Code/eleventy/node_modules/gray-matter/node_modules/js-yaml/lib/js-yaml/loader.js:1614:19)
[11ty]     at Object.safeLoad (/Users/zachleat/Code/eleventy/node_modules/gray-matter/node_modules/js-yaml/lib/js-yaml/loader.js:1637:10)
[11ty]     at module.exports (/Users/zachleat/Code/eleventy/node_modules/gray-matter/lib/parse.js:12:17)
[11ty]     at parseMatter (/Users/zachleat/Code/eleventy/node_modules/gray-matter/index.js:109:17)
[11ty]     at matter (/Users/zachleat/Code/eleventy/node_modules/gray-matter/index.js:50:10)
[11ty]     at #read (file:///Users/zachleat/Code/eleventy/src/TemplateContent.js:193:10)
[11ty] Wrote 0 files in 0.03 seconds (v3.0.0-alpha.14)

However, in running a few more tests it looks like the js-yaml version used internally by gray-matter was still having issues with accurate error reporting on using tabs for indentation. gray-matter is using js-yaml@3 internally.

An upgrade to js-yaml@4 and overwriting the internal yaml parsing engine to use @4 instead of @3 has much more consistent and accurate error messaging.

That makes this issue a breaking change as we’re bumping the default yaml parser a major version, shipping with 3.0.0-alpha.15.

js-yaml Changelog: https://github.com/nodeca/js-yaml/blob/master/CHANGELOG.md#400---2021-01-03

The js-yaml@4 error message looks like this:

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble reading front matter from template ./index.njk (via TemplateContentFrontMatterError)
[11ty] 2. tab characters must not be used in indentation (3:1)
[11ty] 
[11ty]  1 | 
[11ty]  2 | global:
[11ty]  3 | →title: "testing"
[11ty] -----^
[11ty]  4 | someother:
[11ty]  5 |   title: "" (via YAMLException)
[11ty] 
[11ty] Original error stack trace: YAMLException: tab characters must not be used in indentation (3:1)
[11ty] 
[11ty]  1 | 
[11ty]  2 | global:
[11ty]  3 | →title: "testing"
[11ty] -----^
[11ty]  4 | someother:
[11ty]  5 |   title: ""
[11ty]     at generateError (file:///Users/zachleat/Code/eleventy/node_modules/js-yaml/dist/js-yaml.mjs:1273:10)
[11ty]     at throwError (file:///Users/zachleat/Code/eleventy/node_modules/js-yaml/dist/js-yaml.mjs:1277:9)
[11ty]     at readBlockMapping (file:///Users/zachleat/Code/eleventy/node_modules/js-yaml/dist/js-yaml.mjs:2152:7)
[11ty]     at composeNode (file:///Users/zachleat/Code/eleventy/node_modules/js-yaml/dist/js-yaml.mjs:2531:12)
[11ty]     at readDocument (file:///Users/zachleat/Code/eleventy/node_modules/js-yaml/dist/js-yaml.mjs:2715:3)
[11ty]     at loadDocuments (file:///Users/zachleat/Code/eleventy/node_modules/js-yaml/dist/js-yaml.mjs:2778:5)
[11ty]     at Object.load$1 [as load] (file:///Users/zachleat/Code/eleventy/node_modules/js-yaml/dist/js-yaml.mjs:2804:19)
[11ty]     at module.exports (/Users/zachleat/Code/eleventy/node_modules/gray-matter/lib/parse.js:12:17)
[11ty]     at parseMatter (/Users/zachleat/Code/eleventy/node_modules/gray-matter/index.js:109:17)
[11ty]     at matter (/Users/zachleat/Code/eleventy/node_modules/gray-matter/index.js:50:10)
[11ty] Wrote 0 files in 0.03 seconds (v3.0.0-alpha.14)