2

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!

vldmrrdjcc
  • 2,082
  • 5
  • 22
  • 41
user2709619
  • 51
  • 4
  • Either of these help? [gatsby/issues/23831](https://github.com/gatsbyjs/gatsby/issues/23831), [eslint-plugin-markdown/issues/150](https://github.com/eslint/eslint-plugin-markdown/issues/150) – spencer.sm Mar 19 '23 at 17:04
  • A comment on this post about a very similar error message is probably super relevant: https://paulie.dev/posts/2022/08/mdx-2-breaking-changes-and-gatsby-plugin-mdx-v4/ – user2709619 Mar 19 '23 at 17:33
  • @spencer.sm Those do indeed seem to be similar, but I am not using rawBody and also not using ESlint. – user2709619 Mar 19 '23 at 17:42

1 Answers1

0

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

EyaChebbi
  • 1