remark-gfm footnotes are ignored

Question

From the most recent remark-gfm documentation, I can see it should support footnotes. However, when I type something like:

Text here. [^1]

Text here. [^2]

[^1]: note 1

[^2]: note 2

This is displayed as text, rather than converted to HTML tags.

My code is:

...
import ReactMarkdown from "react-markdown";                                      
import remarkGfm from "remark-gfm";
...

<ReactMarkdown children={markdown_content_here} remarkPlugins={[remarkGfm]} />
...

Answer 1

I made it works in this codesandbox.

example.md

Text here. [^1]

Text here. [^2]

[^1]: note 1
[^2]: note 2

import "./styles.css";
import markdown from "./example.md";
import { useEffect, useState } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

export default function App() {
  const [text, setText] = useState(null);

  useEffect(() => {
    (async () => {
      const response = await fetch(markdown);
      const content = await response.text();
      setText(content);
    })();
  }, []);
  return <ReactMarkdown remarkPlugins={[remarkGfm]} children={text} />;
}

(See also this codesandbox with pure unified + remark-gfm).

Conjecture: why it doesn't work

Having a reproducible working example, it's now simple to observe the difference with my real-word code: for some reason, I have remark-gfm v2 installed. You should upgrade to v3 to make sure that footnotes works.