How can I use remark-footnotes with remark-deflist?

[dr-spaceman]

One may encounter the following error when attempting to use footnotes and deflist plugins together:

Error: Cannot handle unknown node 'footnoteReference'

This is how I'm attempting to use them together in my Next.js app:

import remark from 'remark'
import remarkHtml from 'remark-html'
import remarkDeflist from 'remark-deflist'
import remarkFootnote from 'remark-footnotes'

async function markdownToHtml(md) {
    const processedContent = await remark()
        .use(remarkFootnote, { inlineNotes: true })
        .use(remarkDeflist)
        .use(remarkHtml)
        .process(md)

    return processedContent.toString()
}

Removing either footnotes or deflist from the mix works fine! Is there a better way to use these together than the function as it is?

[glitteringkatie]

I'm not certain since you're not using mdx and my problem was related to that, but I think this happens because deflist parses its content as plain markdown. I think this would be fixed on my branch (https://github.com/Symbitic/remark-plugins/pull/14) by passing the following options into deflist:

import remark from 'remark'
import remarkHtml from 'remark-html'
import remarkDeflist from 'remark-deflist'
import remarkFootnote from 'remark-footnotes'
import mdxUtil from "mdast-util-mdx";
import syntax from "micromark-extension-mdxjs";

async function markdownToHtml(md) {
    const processedContent = await remark()
        .use(remarkDeflist, {
          fromMarkdownOptions: {
            extensions: [syntax()],
            mdastExtensions: [mdxUtil.fromMarkdown],
          },
          toMarkdownOptions: { extensions: [mdxUtil.toMarkdown] },
        })
        .use(remarkFootnote, { inlineNotes: true })
        .use(remarkHtml)
        .process(md)

    return processedContent.toString()
}

If you test it out and find it works or works with some added fix, I'd appreciate the feedback!