gatsby-rehype-ghost-links not rewriting urls

[sdhawley]

I could use a little help debugging the setup. It doesn't even look like the plugin is running.

I'm not deep into gatsby plugin development so I'm not sure where to look to see if it ran the plugin and why the urls aren't being transformed.

I suspect something else we have configured may interfere with whatever hook is supposed to run.

[styxlab]

Welcome @sdhawley! Here are a couple of things you could check:

1. configuration, compare with: https://github.com/styxlab/gatsby-theme-try-ghost/blob/68084f26125918980761de0c46a96aa3215cff44/demo/gatsby-config.js#L103

2. Use the graphql endpoint in development mode in order to verify that the CMS url is coming through. Query

   query MyQuery {
   ghostSettings {
   url
   }
   }

   should give a result in ghostSettings.url:

   {
   "data": {
   "ghostSettings": {
     "url": "https://cms.gotsby.org"
   }
   },
   "extensions": {}
   }

This url is needed for the comparison in order to be able to produce relative links.

3. Copy the plugin source code to your project (see Gatsby docs to learn how to include local plugins in your project) and then you can debug by putting in a couple of console.loog() lines.

Hope that helps to getting started. Joost

[sdhawley]

Thanks @styxlab I'll try that and post what I find

[sdhawley]

This might be unrelated but I think I found a problem in gatsby-transformer-rehype. When I tried loading a local copy (called 'localplugin') so that I could insert console.log statements and gatsby-transformer-rehype threw an error that it couldn't find 'localplugin'

module.exports = {
    siteMetadata: {
        siteUrl: config.siteUrl,
    },
    plugins: [
        /**
         *  Content Plugins
         */
        {
            resolve: `gatsby-transformer-rehype`,
            options: {
                filter: node => (
                    node.internal.type === `GhostPost` ||
                    node.internal.type === `GhostPage`
                ),
                plugins: [
                    {
                        resolve: `localplugin`,
                    },
                ],
            },
        },

Changing to require.resolve('./plugins/localplugin') allowed it to continue but it did not execute the preInit hook.

Should gatsby-transformer-rehype know to look in the local plugins folder?

[sdhawley]

I don't see any indication of rehype running during the build, but when I run a query in the GraphiQL console it does trigger and I see some of my console statements.

If I do this query:

query MyQuery {
  allHtmlRehype {
    nodes {
      html
    }
  }
}

I see an error in the response:

{
  "errors": [
    {
      "message": "The \"url\" argument must be of type string. Received undefined",
      "locations": [
        {
          "line": 4,
          "column": 7
        }
      ],
      "path": [
        "allHtmlRehype",
        "nodes",
        12,
        "html"
      ],
      "extensions": {
        "stack": [
          "TypeError [ERR_INVALID_ARG_TYPE]: The \"url\" argument must be of type string. Received undefined",
          "    at validateString (internal/validators.js:124:11)",
          "    at Url.parse (url.js:170:3)",
          "    at Object.urlParse [as parse] (url.js:157:13)",

And from my console.log statement I see that config is undefined

const config = getNode(`gatsby-theme-try-ghost-config`);
console.log(`config is ${config}`)

Should the getNode call be for a project specific config?

[sdhawley]

And like I said, the console statements don't show during the build so it doesn't look like the plugin is running during the build stage.

[sdhawley]

I copied gatsby-transformer-rehype into local plugins and confirmed that was running.

Digging further I see that the real issue is that I expected the original ghost page node to be modified with the new html, and that is not how this works.

It is not clear from the docs that you need to query data from the htmlRehype nodes to use the transformed html, but since that seems to be the expected behavior the mystery is solved.

[sdhawley]

The error I'm seeing in GraphiQL is coming from node.properties.href being undefined when a link doesn't have an href for example in <a>Hello</a>, which is a valid html construct.

[styxlab]

@sdhawley I no longer actively maintain this repo, because I now do everything with Next.js. However, If you want to submit a PR to fix the issue, you are most welcome.

[styxlab]

Closing due to inactivity.