Trying to add 'remark-rehype' and 'rehype-raw' in the plugin options of remark transformer in gridsome.config.js
Steps to reproduce
gridsome.config.js
module.exports = {
siteName: '******',
siteDescription: '********',
siteUrl:'*********',
templates: {
Post: '/:title',
categories: '/categories/:id'
},
plugins: [
{
// Create posts from markdown files
use: '@gridsome/source-filesystem',
options: {
typeName: 'Post',
path: 'content/posts/*.md',
refs: {
// Creates a GraphQL collection from 'tags' in front-matter and adds a reference.
categories: {
typeName: 'categories',
create: true
},
tags: {
typeName: "Tag",
route: "/tag/:id",
create: true
}
}
}
}
],
transformers: {
//Add markdown support to all file-system sources
remark: {
externalLinksTarget: '_blank',
externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
anchorClassName: 'icon icon-link',
plugins: [
'@gridsome/remark-prismjs',
[ 'remark-rehype' ],
['rehype-raw']
]
}
}
}
Expected result
Being able to wrap markdown tags with \
(or any other html tag) in my .md files (an other way is to leave a line blank between html tag and markdown, but in render an unwanted \
is added).
Actual result
Fail to run gridsome develop. Having this error:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /***/node_modules/remark-rehype/index.js
require() of ES modules is not supported.
require() of /***/node_modules/remark-rehype/index.js from /***/node_modules/@gridsome/transformer-remark/lib/utils.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /***/node_modules/remark-rehype/package.json.
This issue is unrelated to Gridsome. The culprit here is the incompatibility between the two (old and new) module systems. remark-rehype has migrated to ESM from CommonJS since 9.0.0. rehype-raw also made a similar move since 6.0.0. I bet you can circumvent this by using versions before 9.0.0 for remark-rehype and 6.0.0 for rehype-raw.
Description
Trying to add 'remark-rehype' and 'rehype-raw' in the plugin options of remark transformer in gridsome.config.js
Steps to reproduce
gridsome.config.js
Expected result
Being able to wrap markdown tags with \
is added).
Actual result
Fail to run gridsome develop. Having this error:
Environment
System: OS: macOS 10.15.3
Binaries: Node: 12.18.0 npm: 7.24.0 - /usr/local/bin/npm
npmPackages: @gridsome/plugin-google-analytics: ^0.1.0 => 0.1.2 @gridsome/remark-prismjs: ^0.2.0 => 0.2.0 @gridsome/source-filesystem: ^0.6.0 => 0.6.2 @gridsome/transformer-remark: ^0.3.0 => 0.3.4 gridsome: ^0.7.0 => 0.7.23 npmGlobalPackages: @gridsome/cli: 0.3.4
This issue is unrelated to Gridsome. The culprit here is the incompatibility between the two (old and new) module systems.
remark-rehype
has migrated to ESM from CommonJS since 9.0.0.rehype-raw
also made a similar move since 6.0.0. I bet you can circumvent this by using versions before 9.0.0 forremark-rehype
and 6.0.0 forrehype-raw
.https://github.com/remarkjs/remark-rehype/releases/tag/9.0.0 https://github.com/rehypejs/rehype-raw/releases/tag/6.0.0