Reference style links in MDX broken in static builds

[jcalcaben]

Description

When building the static assets for a site with MDX content that uses reference-style links and a site prefix, the site prefix does not get appended to the link destination for internal links.

Steps to reproduce

1. npm init gatsby
2. Select No CMS and No styling system
3. Select Add markdown and MDX support feature
4. Edit gatsby-config.js and add a path prefix

    1 module.exports = {
+  2   pathPrefix: `/my-site/`,
    3   siteMetadata: {
    4     title: "My Gatsby Site",
    5   },
    6   plugins: [
    7     "gatsby-plugin-mdx",
    8     {
    9       resolve: "gatsby-source-filesystem",
   10       options: {
   11         name: "pages",
   12         path: "./src/pages/",
   13       },
   14       __key: "pages",
   15     },
   16   ],
   17 };

5. Create a new mdx file (src/pages/test.mdx) with the following content:

This is an [inline link](/path/to/page/).
 
This is a [reference style link][].

[reference style link]: /path/to/page/

6. Build static assets with the prefix flag: npm run build --prefix-paths
7. Serve the static HTML: npm run serve
8. Navigate to: http://localhost:9000/test/

Expected result

The first link will have the destination: http://localhost:9000/my-site/path/to/page/ ✅

The second link will have the destination: http://localhost:9000/my-site/path/to/page/ ✅

Actual result

The first link has the destination: http://localhost:9000/my-site/path/to/page/ ✅

The second link has the destination: http://localhost:9000/path/to/page/ ❌

Environment

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.19.0 - ~/.nvm/versions/node/v12.19.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v12.19.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  Browsers:
    Chrome: 89.0.4389.128
    Safari: 14.0.3
  npmPackages:
    gatsby: ^3.2.1 => 3.3.0
    gatsby-plugin-mdx: ^2.3.0 => 2.3.0
    gatsby-source-filesystem: ^3.3.0 => 3.3.0

[LekoArts]

Thanks for the issue and reproduction! I'm also seeing this following your steps. Unfortunately, at this time I'm not sure why that might happen. Maybe it's a bug in the underlying packages such as remark?

[jcalcaben]

It looks like the path prefix is added in gatsby-plugin-mdx/utils/get-source-plugins-as-remark-plugins.js. However, it only visits link nodes and not definition nodes.

The following change should fix this:

      async function transformer(markdownAST) {
        // Ensure relative links include `pathPrefix`
-       visit(markdownAST, `link`, node => {
+       visit(markdownAST, [`link`, `definition`], node => {
          if (
            node.url &&
            node.url.startsWith(`/`) &&
            !node.url.startsWith(`//`)
          ) {

I can create a PR for this change if you want.

[LekoArts]

Yeah, looking at https://astexplorer.net/#/gist/e6f30d6ee1d24d361ad6baa6e8cd8c62/6e86918d2c1fcb1c964c9c5694e598c1f63ed447 adding definition there makes sense!

A PR would be highly appreciated!

[jcalcaben]

PR created: #30967