Issues migrating gatsby-starter-texblog to Gatsby v4 with gatsby-plugin-mdx

Question

I'm currently trying to update my blog site, which is based on the gatsby-starter-texblog template, to work with the latest version of GatsbyJS. To do so, I've been following the instructions in the gatsby-plugin-mdx documentation, specifically the section about migrating from v3 to v4.

Here's what I've done so far:

1. Removed the defaultLayouts option from gatsby-config.js and moved the gatsbyremark plugins and the remark plugins to the correct places
2. Modified gatsby-node.js to include ?__contentFilePath=
3. Updated my postpage.tsx file to accept children as input and replaced the MDX renderer with {children}

However, I keep running into errors when I try to run gatsby develop. Specifically, my blog posts are not being parsed as MDX, but as JavaScript directly. Here's an example of the error message:

ERROR #gatsby-plugin-mdx_10001  PLUGIN

Failed to compile the file
"/home/faberf/Documents/fynns-blog/content/posts/hello-world.mdx". Original
error message:

Expected usable value, not `undefined`


 ERROR 

Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
SyntaxError: /home/faberf/Documents/fynns-blog/content/posts/hello-world.mdx:
Invalid left-hand side in prefix operation. (1:2)

> 1 | ---
    |   ^
  2 | title: Hello World
  3 | date: "2023-03-17"
  4 | description: "In this blog, I will be sharing insights into my various 
computer science projects. 
    at instantiate (/home/faberf/Documents/fynns-blog/node_modules/@babel/parser
/src/parse-error/credentials.ts:62:21)

Here are my dependencies:

    "@mdx-js/mdx": "^2.3.0",
    "@mdx-js/react": "^2.3.0",
    "@sindresorhus/slugify": "^2.2.0",
    "gatsby": "^4.0.0",
    "gatsby-cli": "^4.0.0",
    "gatsby-image": "^3.11.0",
    "gatsby-plugin-google-analytics": "^4.0.0",
    "gatsby-plugin-manifest": "^4.0.0",
    "gatsby-plugin-mdx": "^4.0.0",
    "gatsby-plugin-offline": "^5.0.0",
    "gatsby-plugin-react-helmet": "^5.0.0",
    "gatsby-plugin-sass": "^5.0.0",
    "gatsby-plugin-sharp": "^4.0.0",
    "gatsby-plugin-typescript": "^4.0.0",
    "gatsby-remark-katex": "^6.0.0",
    "gatsby-source-filesystem": "^4.0.0",
    "gatsby-source-thirdparty": "^1.0.6",
    "gatsby-transformer-remark": "^5.0.0",
    "gatsby-transformer-sharp": "^4.0.0",
    "he": "^1.2.0",
    "katex": "^0.13.0",
    "node-sass": "^8.0.0",
    "package.json": "^2.0.1",
    "prism-react-renderer": "^1.3.5",
    "prop-types": "^15.8.1",
    "react": "^16.0.0",
    "react-burger-menu": "^3.0.9",
    "react-dom": "^16.0.0",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.8.0",
    "rehype-katex": "^6.0.2",
    "remark-math": "^5.1.1",
    "typescript": "^5.0.2"

I've followed the migration guide in the gatsby-plugin-mdx documentation, but it doesn't seem to be working for me. Any ideas on what could be causing these errors and how to fix them? Thank you in advance!

Answer 1

If the file extensions are ".jsx" or ".js" make sure to change them to ".mdx" in order for the gatsby-plugin-mdx to recognize them. Also, check that the extension configuration in 'gatsby-config.js' is updated. It should include ".mdx" like this:

 {
  resolve: "gatsby-plugin-mdx",
  options: {
    extensions: [".mdx", ".md", ".markdown"],
  },
},

If none of these work, try removing and reinstalling the gatsby-plugin-mdx package, maybe there is an issue with the installation. Hope this helps