gridsome / gridsome

⚡️ The Jamstack framework for Vue.js
https://gridsome.org
MIT License
8.55k stars 489 forks source link

"Error [ERR_REQUIRE_ESM]: Must use import to load ES Module" when trying to add a Remark plugin #1565

Open lousolverson opened 3 years ago

lousolverson commented 3 years ago

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


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.

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

UnKnoWn-Consortium commented 2 years ago

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.

https://github.com/remarkjs/remark-rehype/releases/tag/9.0.0 https://github.com/rehypejs/rehype-raw/releases/tag/6.0.0