remark-frontmatter conflict with @gridsome/transformer-remark

[NickSto]

Hi, I just started using remark-frontmatter, and it works perfectly in my test setup, but then when I tried to use it in my Gridsome project it will not recognize my frontmatter.

Through some experiments I've narrowed it down to some sort of conflict with @gridsome/transformer-remark. In a minimal setup, it works until I install that package. I'm pretty new to the node ecosystem though so I'm not sure how to track down what the issue is or how to get both working together even if I do. I'd super appreciate any pointers people have.

My package.json:

{
  "name": "tests",
  "version": "0.1",
  "description": "tests",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "@gridsome/transformer-remark": "^0.6.4",
    "rehype-parse": "^7.0.1",
    "rehype-stringify": "^8.0.0",
    "remark": "^13.0.0",
    "remark-html": "^13.0.1",
    "remark-rehype": "^8.0.0",
    "remark-frontmatter": "^3.0.0",
    "unified-stream": "^1.0.6"
  }
}

My test script (bug.js):

const process = require('process');
const unified = require('unified');
const unifiedStream = require('unified-stream');
const remarkParse = require('remark-parse');
const remarkFrontmatter = require('remark-frontmatter');
const remarkStringify = require('remark-stringify');

const processor = unified()
  .use(remarkParse)
  .use(remarkFrontmatter)
  .use(remarkStringify);

process.stdin.pipe(unifiedStream(processor)).pipe(process.stdout);

My example Markdown file (minimal.md):

---
title: This is an example.
---

Some Markdown.

When @gridsome/transformer-remark is absent:

$ node bug.js < minimal.md 
---
title: This is an example.
---

Some Markdown.

When @gridsome/transformer-remark is installed:

$ node bug.js < minimal.md 
***

## title: This is an example.

Some Markdown.

And FWIW, here's a diff of my yarn.lock files before and after @gridsome/transformer-remark is installed (as generated by yarn-lock-diff).

[wooorm]

Try the previous version of remark-frontmatter. I’m assuming gridsome hasn’t updated yet: you could raise an issue there or see if one already exists.

[NickSto]

Thanks for the suggestion! So where are you thinking the incompatibility could be? Between a gridsome dependency and remark-frontmatter? If I'm reading the yarn.lock file right, it does look like @gridsome/transformer-remark (0.6.4) is using version 8.0.0 of remark-html when the latest version is 13.0.0. Also, unified 7.0.0 (latest is 9.2.1). Don't know if/how that would affect remark-frontmatter.

Actually, I'm confused about how the installation of another package can affect the functioning of an existing one. Even if @gridsome/transformer-remark installs some old versions of its dependencies, don't those stay local to the @gridsome/transformer-remark code?

Also, I did try switching remark-frontmatter to 2.0.0, but I just got Error: Cannot handle unknown node `yaml`

Details: I switched by changing the package.json line
"remark-frontmatter": "^3.0.0",
to
"remark-frontmatter": "^2.0.0",

I also tried downgrading remark from 13.0.0 to 12.0.0 at the same time, but that didn't solve it.

[NickSto]

Okay, so I found a solution.

I added this dependency to my package.json:

    "remark-parse": "^9.0.0",

I realized that I hadn't explicitly added that dependency, since I hadn't needed to. I think that's because remark-parse was already installed via another dependency? Somehow in the end, the top-level version of remark-parse I had installed without @gridsome/transformer-remark was 9.0.0, but with it, it became 6.0.3. Which I assume breaks things.

I still don't really understand what happened and why. Node dependency management just got more confusing the more I delved into it.

[wooorm]

It looks like gridsome is using very outdated packages. I don’t know how gridsome works, so I can’t advise on how to make it work: you will have more luck asking them.

For the “how node modules work”: make sure to add everything you use (such as require()) to your package.json. The reason is that in Node land, multiple versions of a package can be used, the one you are using, and different ones in other dependencies.

[NickSto]

Yeah, I think they've let the current version languish for a while as they work on something else.

Definitely learned my lesson about making sure everything I import is explicitly listed in my package.json. I think when I was setting up my dependencies I knew even less about package management than I do now.

Thanks for the tips!