I was trying to follow the documentation on including rehype plugins for gatsby-plugin-mdx. Specifically I was trying to use the rehype-slug
plugin. I installed the packaged with npm and set my gatsby.config.js
file to
module.exports = {
siteMetadata: {
siteUrl: "https://www.yourdomain.tld",
title: "test Website",
},
plugins: [
{
resolve: "gatsby-plugin-mdx",
options:{
rehypePlugins: [
require("rehype-slug")
]
}
}
],
};
gatsby develop
I encouter the following error:
Error: [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\User\Documents\test-site\node_modules\rehype-slug\index.js require() of ES modules is not supported.
I encouter similar problems when trying to use the remark-math
and rehype-katex
plugins. I'm using version 3.13.0 of the Gatsby CLI. The problem persists even with a completely new website. Any help with this issue would be much appreciated.
Not sure if it will work but, instead of using require from ES modules have you tried something like:
Based on: https://github.com/rehypejs/rehype-slug
Or directly importing in inside
rehypePlugins
as a dynamic import.I've made a little bit of research and I found that dynamic imports are not supported because you can't access the value in the callback, so waiting for the import is not a solution either nor using an ES module.
However, the final solution (or at least the temporary working one) with your exact same use-case can be found in this GitHub discussion:
All credits to the magician involved