Abdulkader Safi

gray-matter needed Node's Buffer, and browsers do not have one

The board listed projects but showed no tasks because gray-matter imports Node's buffer module, which browsers do not have. Replaced it with a dependency-free parser for the one schema the board uses.

2 min read

Share
screenshot of MD Kanban

The board loaded, the projects listed, and every column was empty. The console said Buffer is not defined. The frontmatter parser, gray-matter, is a Node library that imports Node's buffer module, which does not exist in browsers. Vite externalized it at build time and the parse crashed at runtime for every single task file.

Delete the dependency

gray-matter pulls js-yaml with it, so removing both cut the production bundle from 403 KB to 179 KB and silenced the build warning in the same move. Nothing else in the project touched either package. One file imported gray-matter, the markdown module, and that was the whole blast radius.

A parser for exactly one schema

Rather than finding a smaller YAML library, I wrote a parser for the only schema this board will ever see: strings, null, numbers, and inline string arrays, plus block-style label lists and missing frontmatter entirely. Quoted, single-quoted, and bare values all parse. Serialization always emits the same canonical shape, so files the board writes stay clean for the next tool that reads them.

Prove it with round trips

Before committing, every variant went through parse, stringify, and re-parse: the exact upstream format with all keys, null due dates with block lists, files with no frontmatter at all, single-quoted ids with empty label arrays. Identical data every time. The check runs in plain Node against the TypeScript source, no test framework, since the repo has none and one file did not justify adding one.

Where it stands

Tasks render from real folders, edits save back byte-clean, and the parser has no dependencies left to break. The lesson restated: a library that assumes Node inside a browser bundle is a landmine with a delay, and the delay was exactly one page load.

Last updated 6 Sep 2026 · filed under Typescript, tools, vue, claude code, ai agent

Every entry on this project

13 build notes, in order

Including the ones where nothing worked. You are on part 2.

Read the series →

FAQ

Frequently asked questions

Why not use a smaller YAML library instead?

No. The board's frontmatter uses a fixed set of keys with strings, nulls, numbers, and string arrays, which a small purpose-built parser covers completely. A general YAML library would add weight and a new failure surface for syntax the board never writes.

How do you verify a hand-written parser?

Take each sample through parse, stringify, and re-parse, then compare every field. If all four variants, full frontmatter, nulls with block lists, no frontmatter, single quotes with empty arrays, come back identical, the serializer is safe to write with.

Written by

Abdulkader Safi

Software Engineer

Lead engineer at DSRPT, from Lebanon and based in Kuwait. I write about the tools and bugs from real client work, with the numbers I measured.

About me → GitHub LinkedIn

Need this kind of work done on your project?

Start a project →

Keep reading

More from MD Kanban

All 13 entries →