Facing issues while using 'remark-gfm' package

[mustaquenadim]

My current published site (https://mustaquenadim.com) is built on Gatsby v3. I tried and successfully upgraded my site to the Gatsby version 5. Then I felt the necessity of custom components for my blogs. So I decided to migrate from simple markdown to mdx. During migration, I've faced several issues and solved a few with the help of some community and myself.

Problem

I've followed this documentation. I believe I did more than the documentation. Whatever.

After migration, I noticed that my previous markdown table syntax is rendering as the syntax, not converting to table markup. Also, I made a custom component to be used in my blog. The custom component is not working too. I searched for the solution and decided to use remark-gfm plugin to solve the table rendering issue. But remark-gfm plugin causing some errors. I can't understand the issue.

Website: https://mustaquenadim.com (Gatsby 3)
GitHub Repository: https://github.com/mustaquenadim.github.io
Issue is created in the special-markdown named branch.

Error 1

ERROR UNKNOWN

Module build failed (from
./node_modules/gatsby/dist/utils/babel-loader.js):
SyntaxError:
D:\PROJECTS\mustaquenadim.github.io\content\posts\differen
ce-between-dependencies-and-dev-dependencies\index.mdx:
Invalid left-hand side in prefix operation. (1:2)

1 | ---
| ^
2 | title: 'Dependencies vs DevDependencies: What Every
Beginner Should Know'
3 | description: 'Discover the key differences between
functions and methods in JavaScript'
4 | date: 2024-05-26
at toParseError (D:\PROJECTS\mustaquenadim.github.io\n
ode_modules@babel\parser\src\parse-error.ts:74:19)
at JSXParserMixin.raise
(D:\PROJECTS\mustaquenadim.github.io\node_modules@babel\p
arser\src\tokenizer\index.ts:1497:19)
at JSXParserMixin.checkLVal

Error 2

ERROR #gatsby-plugin-mdx_10001 PLUGIN

Failed to compile the file
"D:/PROJECTS/mustaquenadim.github.io/content/posts/differe
nce-between-dependencies-and-dev-dependencies/index.mdx".
Original error message:

Cannot set properties of undefined (setting 'inTable')

gatsby-config.mjs

import { dirname } from 'path';
import remarkGfm from 'remark-gfm';
import { fileURLToPath } from 'url';
import siteConfig from './src/config.js';

// Create __filename and __dirname for ES modules
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const config = {
  pathPrefix: '/',
  siteMetadata: {
    title: 'Mustaque Nadim',
    description:
      'Mustaque Nadim is a passionate programmer from Bangladesh, skilled in building web applications using MERN (MongoDB, ExpressJS, ReactJS, NodeJS) technologies.',
    siteUrl: 'https://mustaquenadim.com', // No trailing slash allowed!
    image: '/og.png', // Path to your image you placed in the 'static' folder
    twitterUsername: '@_mustaquenadim_',
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-styled-components`,
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sitemap`,
    `gatsby-plugin-robots-txt`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'mustaquenadim',
        short_name: 'mustaquenadim',
        start_url: '/',
        background_color: siteConfig.colors.darkNavy,
        theme_color: siteConfig.colors.navy,
        display: 'minimal-ui',
        icon: 'src/images/logo.png',
      },
    },
    `gatsby-plugin-offline`,
    {
      // https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.md`, `.mdx`, `.markdown`],
        gatsbyRemarkPlugins: [
          {
            // https://www.gatsbyjs.org/packages/gatsby-remark-external-links
            resolve: 'gatsby-remark-external-links',
            options: {
              target: '_blank',
              rel: 'nofollow noopener noreferrer',
            },
          },
          {
            // https://www.gatsbyjs.org/packages/gatsby-remark-images
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 700,
              linkImagesToOriginal: true,
              quality: 90,
              tracedSVG: { color: siteConfig.colors.green },
            },
          },
          {
            // https://www.gatsbyjs.org/packages/gatsby-remark-code-titles/
            resolve: 'gatsby-remark-code-titles',
          }, // IMPORTANT: this must be ahead of other plugins that use code blocks
          {
            // https://www.gatsbyjs.org/packages/gatsby-remark-prismjs
            resolve: `gatsby-remark-prismjs`,
            options: {
              // Class prefix for <pre> tags containing syntax highlighting;
              // defaults to 'language-' (e.g. <pre class="language-js">).
              // If your site loads Prism into the browser at runtime,
              // (e.g. for use with libraries like react-live),
              // you may use this to prevent Prism from re-processing syntax.
              // This is an uncommon use-case though;
              // If you're unsure, it's best to use the default value.
              classPrefix: 'language-',
              // This is used to allow setting a language for inline code
              // (i.e. single backticks) by creating a separator.
              // This separator is a string and will do no white-space
              // stripping.
              // A suggested value for English speakers is the non-ascii
              // character '›'.
              inlineCodeMarker: null,
              // This lets you set up language aliases.  For example,
              // setting this to '{ sh: "bash" }' will let you use
              // the language "sh" which will highlight using the
              // bash highlighter.
              aliases: {},
              // This toggles the display of line numbers globally alongside the code.
              // To use it, add the following line in gatsby-browser.js
              // right after importing the prism color scheme:
              //  require("prismjs/plugins/line-numbers/prism-line-numbers.css")
              // Defaults to false.
              // If you wish to only show line numbers on certain code blocks,
              // leave false and use the {numberLines: true} syntax below
              showLineNumbers: false,
              // If setting this to true, the parser won't handle and highlight inline
              // code used in markdown i.e. single backtick code like `this`.
              noInlineHighlight: false,
              // This adds a new language definition to Prism or extend an already
              // existing language definition. More details on this option can be
              // found under the header "Add new language definition or extend an
              // existing language" below.
              languageExtensions: [
                {
                  language: 'superscript',
                  extend: 'javascript',
                  definition: {
                    superscript_types: /(SuperType)/,
                  },
                  insertBefore: {
                    function: {
                      superscript_keywords: /(superif|superelse)/,
                    },
                  },
                },
              ],
              // Customize the prompt used in shell output
              // Values below are default
              prompt: {
                user: 'root',
                host: 'localhost',
                global: false,
              },
            },
          },
        ],
        mdxOptions: {
          remarkPlugins: [
            remarkGfm,
            // [remarkExternalLinks, { target: false }]
          ],
          // rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behavior: `wrap` }]],
        },
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'content',
        path: `${__dirname}/content/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `featured`,
        path: `${__dirname}/content/featured`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `jobs`,
        path: `${__dirname}/content/jobs`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/content/posts`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `projects`,
        path: `${__dirname}/content/projects`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `services`,
        path: `${__dirname}/content/services`,
      },
    },
    {
      resolve: 'gatsby-plugin-google-tagmanager',
      options: {
        id: 'GTM-NCKQ6SB',
        includeInDevelopment: false,
      },
    },
  ],
};

export default config;

index.mdx

---
title: 'Dependencies vs DevDependencies: What Every Beginner Should Know'
description: 'Discover the key differences between functions and methods in JavaScript'
date: 2024-05-26
draft: false
slug: /pensieve/difference-between-dependencies-and-dev-dependencies
tags:
  - JavaScript
  - Programming
---

As a curious programmer, you might come across the terms "dependencies" and "devDependencies" when working on JavaScript or Node.js projects. These terms can seem confusing at first, but they are essential concepts to understand when managing your project's libraries and tools. In this blog, we'll break down what dependencies and devDependencies are, why they matter, and provide a simple example to illustrate the difference.

<details>
  <summary><b>Table of Contents</b></summary>

- [Dependencies](#dependencies)
- [DevDependencies](#devdependencies)
- [Example](#example)
- [Why It Matters](#why-it-matters)
- [Comparison Table](#comparison-table)
- [Conclusion](#conclusion)

</details>

## Dependencies <a id='dependencies'></a>

<table border="1">
  <thead>
    <tr>
      <th>foo</th>
      <th>bar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>baz</td>
      <td>bim</td>
    </tr>
  </tbody>
</table>

| foo | bar |
| --- | --- |
| baz | bim |

Happy coding!

The following image was produced after commenting the remarkGfm line.

[wooorm]

I cannot give advice on Gatsby. They’re a for-profit product, which I do not work on. And, it’s unmaintained. I’d recommend to ask them, but I am not sure you’ll get a response. Perhaps choose some other framework

[mustaquenadim]

Thanks for your response.

[mustaquenadim]

@LekoArts

[erichfw]

@mustaquenadim - were you able to resolve this issue?