Unable to `import` or `require` unist utils (error: `Must use import to load ES Module`)

Version

@nuxt/content: 1.14.0 nuxt: 2.15.3 node: 14 +

Reproduction Link

Steps to reproduce

1. Just install “unist-util-find-before”: “^3.0.0”, and “unist-util-select”: “^4.0.0”.
2. Try to import or require them in any .js file inside /plugins folder. Register such plugin
3. OR try to import or require them in normal .vue pages, and use it any method.

What is Expected?

1. To be able to properly import or require the utils.

What is actually happening?

As it says on https://github.com/syntax-tree/unist-util-select,

This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.

Use in vue page

So, I did this in normal “vue” page

<template>
 ...
</template>

<script>
import unified from "unified";
let visit = require("unist-util-visit"); // this works with both import and require (see notes below)

import { selectAll } from "unist-util-select"; // 1 (as recommended in their docs)
import selectAll from "unist-util-select"; // OR 2
let selectAll = require("unist-util-select").selectAll; // OR 3

vue stuff here...

</script>

None of 1, 2, or 3 works.

all 3 alternatives of “unist-util-select” gives this error:

Error
Must use import to load ES Module: C:\Users\manas\repo\node_modules\unist-util-select\index.js require() of ES modules is not supported. 

require() of C:\Users\manas\repo\node_modules\unist-util-select\index.js from C:\Users\manas\repo\node_modules\vue-server-renderer\build.dev.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 C:\Users\manas\repo\node_modules\unist-util-select\package.json.

---

Strangely enough, even on the “unist-util-visit” docs (https://github.com/syntax-tree/unist-util-visit#install), it is given that it should be imported and not required. But if I use import like this:

import { visit } from "unist-util-visit"; // recommended in docs

It gives this error

TypeError
Object(...) is not a function

But this

import visit from "unist-util-visit";
// OR 
let visit = require("unist-util-visit");

works fine.

---

Use in custom rehype plugin

Now, instead of using these utils on normal .vue page, if I used them inside a custom remark/rehype plugin created in plugins folder,

let visit = require("unist-util-visit"); // works fine

import { selectAll } from "unist-util-select"; // 1
let selectAll = require("unist-util-select").selectAll; // OR 2
let selectAll = require("unist-util-select"); // OR 3
let selectAll = import("unist-util-select").selectAll; // OR 4

export default function() {
  return (tree, {data}) {
    visit(tree, 'element', (node, i, parent) => {
      // ...
     let selectAll = require("unist-util-select").selectAll; // OR 4
     let selectAll = import("unist-util-select").selectAll; // OR 5
   }
  }
}

Due to 1 or 5, I get this error in the terminal itself.

ERROR  SyntaxError: Cannot use import statement outside a module

OR

Due to 2, 3, 4, or 6, I get this error in the terminal itself.

ERROR SyntaxError: Unexpected token 'export

ISSUE: Then, how should I use these utils if both import and require doesn’t work in vue or plugins file or even outside or inside the function?

[ChristianMurphy]

This appears to be related to the larger ESM issue: https://github.com/nuxt/nuxt.js/issues/9302

[farnabaz]

As we are using latest versions of Remark & Rehype and Nuxt 3 gives support for ESM modules, all of this should be fine using @nuxt/content v2.

I am closing this issue, but feel free to re-open if you still have the problem!.