Can't get gatsby-plugin-catch-links to work with gatsby-source-wordpress

[phbo85]

Summary

I'm using gatsby-source-wordpress and everything works fine. The WordPress content uses internal links which I want to change using gatsby-plugin-catch-links.

In my implementation I'm putting the content from the graphQL query into the template like this:

       <div
          className="wp-content content lg:px-0 mt-12 text-gray-700 max-w-screen-md mx-auto text-lg leading-relaxed"
          dangerouslySetInnerHTML={{ __html: content }}
        />

The result is, that the links don't change at all and still point to the WordPress installation

What am I doing wrong? Is it even supposed to work like this?

Relevant information

Environment (if relevant)

System:
OS: Windows 10
CPU: (12) x64 Intel(R) Core(TM) i7-5820K CPU @ 3.30GHz
Binaries:
Yarn: 1.12.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.5.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.18362.449.0
npmPackages:
gatsby: ^2.24.65 => 2.24.67
gatsby-image: ^2.4.19 => 2.4.20
gatsby-plugin-catch-links: ^2.3.12 => 2.3.15
gatsby-plugin-lodash: ^3.1.7 => 3.1.15
gatsby-plugin-netlify: ^2.1.12 => 2.1.25
gatsby-plugin-purgecss: ^4.0.1 => 4.0.1
gatsby-plugin-react-helmet: ^3.3.6 => 3.3.14
gatsby-plugin-sass: ^2.1.14 => 2.1.23
gatsby-plugin-sharp: ^2.6.36 => 2.6.38
gatsby-remark-images: ^3.1.21 => 3.1.32
gatsby-source-filesystem: ^2.3.29 => 2.3.34
gatsby-source-wordpress: ^3.3.34 => 3.3.38
gatsby-transformer-remark: ^2.8.35 => 2.8.38
gatsby-transformer-sharp: ^2.5.15 => 2.5.17

File contents (if changed)

I removed the WordPress URL for the sake of privacy, the actual installation has one.
gatsby-config.js:

const path = require(`path`)
const resolveConfig = require('tailwindcss/resolveConfig')
const tailwindConfig = require('./tailwind.config.js')
const fullConfig = resolveConfig(tailwindConfig)

module.exports = {
  siteMetadata: {
    title: '...',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        postCssPlugins: [
          require('tailwindcss'),
          require('./tailwind.config.js'),
        ],
      },
    },
    {
      resolve: 'gatsby-source-wordpress',
      options: {
        baseUrl: '...',
        hostingWPCOM: false,
        protocol: 'https',
        useACF: false,
        auth: {},
        verboseOutput: false,
        includedRoutes: [
          '**/categories',
          '**/pages',
          '**/media',
          '**/tags',
          '/yoast/**',
        ],
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-plugin-purgecss',
      options: {
        develop: false,
        tailwind: true,
      },
    },
    'gatsby-plugin-catch-links',
    'gatsby-plugin-netlify',
  ],
}

package.json:

{
  "name": "gatsby-starter-wordpress",
  "description": "Gatsby v2 starter for WordPress",
  "version": "0.1.0",
  "author": "GatsbyCentral.com",
  "dependencies": {
    "gatsby": "^2.24.65",
    "gatsby-image": "^2.4.19",
    "gatsby-plugin-catch-links": "^2.3.12",
    "gatsby-plugin-lodash": "^3.1.7",
    "gatsby-plugin-netlify": "^2.1.12",
    "gatsby-plugin-purgecss": "^4.0.1",
    "gatsby-plugin-react-helmet": "^3.3.6",
    "gatsby-plugin-sass": "^2.1.14",
    "gatsby-plugin-sharp": "^2.6.36",
    "gatsby-remark-images": "^3.1.21",
    "gatsby-source-filesystem": "^2.3.29",
    "gatsby-source-wordpress": "^3.3.34",
    "gatsby-transformer-remark": "^2.8.35",
    "gatsby-transformer-sharp": "^2.5.15",
    "lodash": "^4.17.20",
    "node-sass": "^4.14.1",
    "parcel-bundler": "^1.12.4",
    "prop-types": "^15.6.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-helmet": "^6.1.0",
    "uuid": "^3.3.3"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "start": "npm run develop",
    "clean": "rimraf .cache public",
    "build": "npm run clean && gatsby build",
    "develop": "npm run clean && gatsby develop",
    "serve": "gatsby serve",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-prettier": "^6.3.0",
    "prettier": "^1.18.2",
    "rimraf": "^3.0.0",
    "tailwindcss": "^1.8.10"
  },
  "prettier": {
    "trailingComma": "es5",
    "semi": false,
    "singleQuote": true
  }
}

[LekoArts]

Hi, thanks for the issue!

Before further digging into this issue, would you be up for switching to the latest WordPress version?
gatsby-source-wordpress@v3 will soon be deprecated in favor of https://github.com/gatsbyjs/gatsby-source-wordpress-experimental (it'll be released under the same name in gatsby-source-wordpress@v4).

It'll solve your problem by default: https://github.com/gatsbyjs/gatsby-source-wordpress-experimental/blob/master/docs/features/html-processing.md#gatsby-link

[phbo85]

Thank you @LekoArts! I was trying the experimental WordPress source plugin, but it failed building. I created an issue there already and will probably be able to see if this works better for my project.