gatsby-transformer-remark lost footnotes with #29678

[fshowalter]

Description

#29678 broke footnotes. They were extracted from remark in v 12.0.0 (https://github.com/remarkjs/remark/releases/tag/remark-stringify%408.0.0) to remark-footnotes https://github.com/remarkjs/remark-footnotes. Similar to gfm we need to import and load that module in extend-node-type.js (

gatsby/packages/gatsby-transformer-remark/src/extend-node-type.js

Line 120 in da503c6

remark = remark.use(remarkGfm)

)

Also, the commonmark and pedantic options can be removed as remark no longer supports them (https://github.com/remarkjs/remark/releases/tag/13.0.0)

Downgrading to gatsby-transformer-remark@3.3.0-next.1 restores footnote support.

Steps to reproduce

See starter blog with remark. Add a footnote. See it does not process.

Expected result

Footnotes should be supported.

Actual result

Footnotes are not transformed.

Environment

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-3635QM CPU @ 2.40GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /Users/fshowalt/.pyenv/shims/python
  Browsers:
    Chrome: 89.0.4389.128
    Firefox: 57.0.4
    Safari: 14.0.3
  npmPackages:
    gatsby: ^3.3.0 => 3.3.0
    gatsby-cli: ^3.3.0 => 3.3.0
    gatsby-plugin-catch-links: ^3.3.0 => 3.3.0
    gatsby-plugin-feed: ^3.3.0 => 3.3.0
    gatsby-plugin-image: ^1.3.0 => 1.3.0
    gatsby-plugin-manifest: ^3.3.0 => 3.3.0
    gatsby-plugin-preact: ^5.3.0 => 5.3.0
    gatsby-plugin-react-helmet: ^4.3.0 => 4.3.0
    gatsby-plugin-sass: ^4.3.0 => 4.3.0
    gatsby-plugin-sharp: ^3.3.0 => 3.3.0
    gatsby-plugin-sitemap: ^3.3.0 => 3.3.0
    gatsby-remark-smartypants: ^4.0.0 => 4.0.0
    gatsby-source-filesystem: ^3.3.0 => 3.3.0
    gatsby-transformer-json: ^3.3.0 => 3.3.0
    gatsby-transformer-remark: ^4.0.0 => 4.0.0
    gatsby-transformer-sharp: ^3.3.0 => 3.3.0
  npmGlobalPackages:
    gatsby-cli: 2.12.62

[LekoArts]

A PR fixing the code + documentation would be appreciated!

[fshowalter]

@LekoArts because you asked nicely 😉

[PsyGik]

Hello 👋🏽,

I am not sure if this change broke the implementation, but this no longer works:

Some Markdown Content[^1]
Another Content
Some More Content[^2]


[^1]: First Footnote
[^2]: Second Footnote
[^3]: Third Footnote // This doesn't get rendered.

This outputs as:

<p>
    Some Markdown Content<sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup>
    Another Content
    Some More Content<sup id="fnref-2"><a href="#fn-2" class="footnote-ref">2</a></sup>
</p>
<div class="footnotes">
    <hr>
    <ol>
    <li id="fn-1">First Footnote<a href="#fnref-1" class="footnote-backref">↩</a></li>
    <li id="fn-2">Second Footnote<a href="#fnref-2" class="footnote-backref">↩</a></li>
    </ol>
</div>

The [^3] isn't referenced anywhere in the content, so it doesn't get rendered.

As soon as I add it to the markdown, it get's rendered.

Some Markdown Content[^1]
Another Content[^3]
Some More Content[^2]


[^1]: First Footnote
[^2]: Second Footnote
[^3]: Third Footnote // This doesn't get rendered.

Is this the intended behaviour? Because on "gatsby": "^3.2.1", footnotes used to render without being referenced anywhere else in the markdown

[fshowalter]

It’s likely a change in the underlying remark engine. They split footnotes into a separate plugin https://github.com/remarkjs/remark-footnotes which Gatsby pulled in to re-enable footnotes. Maybe in the process of extracting it, remark changed some behavior? I’d suggest posting your above sample as an issue in the remark-footnotes repo to see if it was by design.