Cannot find MDX module in Gatsby - reactjs

Question

I'm making a Gatsby site, and I've intially set it up to use markdown files via gatsby-transformer-remark. I've since decided to move it over to MDX in order to have a bit more freedom in what content I can use.
I've followed this guide to migrate the project from MD to MDX, but I keep getting the following error:
Cannot find module 'D:\XXXX\XXXX\gatsby\.cache\caches\gatsby-plugin-mdx\webpack\output.js'
Require stack:
- D:\XXXX\XXXX\gatsby\node_modules\gatsby-plugin-mdx\utils\render-html.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby-plugin-mdx\gatsby\source-nodes.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby-plugin-mdx\gatsby-node.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\bootstrap\load-plugins\validate.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\bootstrap\load-plugins\load.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\bootstrap\load-plugins\index.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\services\initialize.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\services\index.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\state-machines\develop\services.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\state-machines\develop\index.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\commands\develop-process.js
- D:\XXXX\XXXX\gatsby\.cache\tmp-4452-lp3aICfNr8bo
I've tried:
Clearing cache and build files (gatsby clean)
Updating all packages, including Gatsby itself
Various ways to include the plugin in gatsby-config.js
Changing it all back to MD, making sure it works, and then migrating it to MDX once again.
Doing a build. Same thing happens as when running gatsby develop
Deleting package-lock.json and node_modules folder and running npm install again.
Nothing worked. This has to be something really stupid to do with NPM or Webpack but I just don't see it.
gatsby-config.js
module.exports = {
siteMetadata: {
title: "XXXX",
copyright: "XXXX"
},
plugins: [
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [`.md`, `.mdx`],
},
},
`gatsby-transformer-remark`,
`gatsby-plugin-image`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `src`,
path: `${__dirname}/src/`,
},
},
]
}
package.json
{
"name": "gatsby-starter-hello-world",
"private": true,
"description": "A simplified bare-bones starter for Gatsby",
"version": "0.1.0",
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"dependencies": {
"#mdx-js/mdx": "^1.6.22",
"#mdx-js/react": "^1.6.22",
"gatsby": "^3.1.2",
"gatsby-plugin-image": "^1.1.2",
"gatsby-plugin-mdx": "^2.1.0",
"gatsby-plugin-sharp": "^3.1.2",
"gatsby-source-filesystem": "^3.1.0",
"gatsby-transformer-remark": "^3.1.0",
"gatsby-transformer-sharp": "^3.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-in-viewport": "^1.0.0-alpha.16",
"react-reveal-text": "^0.1.1",
"react-spring": "^8.0.27",
"react-text-loop": "^2.3.0"
},
"devDependencies": {
"prettier": "2.2.1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
EDIT:
I should point out that when I go that location in cache that's mentioned in the error, there really is no webpack folder, nor output.js - so it really isn't being generated when I run gatsby develop, I just can't understand why.
I've also tried making a new project by cloning the offical gatsby mdx starter template, and that is working just fine out of the box.