Error [ERR_REQUIRE_ESM]: Must use import to load ES Module about unist-util-visit HOT 14 CLOSED

• see the linked posts for more on this discussion and Next
• my experience maintaining dual esm/cjs is that there are tons of problems
• feel free to use the previous version while you or your tools are not ready

from unist-util-visit.

The goal is to go full ESM unifiedjs/unified#121
The reasons are similar to https://blog.sindresorhus.com/get-ready-for-esm-aa53530b3f77, and there are some related discussions and workarounds for build tools at sindresorhus/meta#15

from unist-util-visit.

Rollup is a bundler made for ESM. I don’t see why workarounds are needed to support ESM?

Workaround isn't needed to support ESM, it's used to support CJS consumers of a library built with rollup (or any bundler) (assuming they still exist out there in the world). I ran into this issue with an older Gatsby version that is otherwise working for now, for example.

Without this workaround, the cjs bundle will attempt to require the esm module upstream and receive this error.

from unist-util-visit.

Hi! It seems some of the things asked in the template are missing? Please edit your post to fill out everything.

• Initial checklist
• Steps to reproduce
• Expected behavior
• Actual behavior (todo)

You won’t get any more notifications from me, but I’ll keep on updating this comment, and remove it when done!

<!--
  Bug: please check the needed checkboxes ([ ] -> [x]) and fill out the TODOs.
  Leave the comments as they are: they won’t show on GitHub.

  Some general tips:
  - Is this really a problem?
  - Is this a problem here?
  - Can this be solved in a different way?
-->

### Initial checklist

*   [ ] I read the support docs <!-- https://github.com/syntax-tree/.github/blob/main/support.md -->
*   [ ] I read the contributing guide <!-- https://github.com/syntax-tree/.github/blob/main/contributing.md -->
*   [ ] I agree to follow the code of conduct <!-- https://github.com/syntax-tree/.github/blob/main/code-of-conduct.md -->
*   [ ] I searched issues and couldn’t find anything (or linked relevant results below) <!-- https://github.com/search?q=user%3Asyntax-tree&type=Issues -->

<!--
  Please test using the latest version of the relevant packages to make sure
  your issue has not already been fixed. Also make sure you’re on recent versions
  of Node and npm.
-->

Affected packages and versions: TODO

### Steps to reproduce

<!--
  How did this happen?
  Please provide a minimal, reproducible example:
  https://stackoverflow.com/help/minimal-reproducible-example
  Issues without reproduction steps or code examples may be immediately closed
  as not actionable.

  Here are some starters on codesandbox:
  - remark only (for markdown to markdown): https://codesandbox.io/s/remark-debug-ikwvx
  - remark and rehype (for markdown to html): https://codesandbox.io/s/remark-rehype-debug-4cz8v
  - react-markdown: https://codesandbox.io/s/react-markdown-debug-9n4eg

  Either link to runnable code (not your whole repo) or post the code inline.
-->

1.  TODO
2.  TODO

Link to code example: TODO

### Expected behavior

<!--What should happen?-->

TODO

### Actual behavior

<!--What happens instead?-->

TODO

Thanks,
— bb

from unist-util-visit.

Oooh, the first issue where Beep Boop our bot is kicking in!

Yeah. The plan is to go with full ESM. In 8 days ESM is supported properly in all maintained Node release lines. And ESM works really well! ✨

from unist-util-visit.

Hi team! Could you describe why this has been marked as wontfix?

Thanks,
— bb

from unist-util-visit.

I don’t see this happening. For now, it’s possible to stay a release behind for a bit ’till you’re ready. But I expect (and hope) more folks will switch, making ESM more normal, and making supporting Node 10 less normal.

from unist-util-visit.

I'm using unist-util-visit from my next.config.js, which must be a .js file (.mjs isn't picked up), and I can't mark then package with type:module (because next.js uses require() to load the config file).

It's unfortunate to drop support for cjs, especially because it's relatively easy to support for pure modules (that contain just functions / consts and no global state), using the package.json import maps…

from unist-util-visit.

you can use version 2.0.1 instead

from unist-util-visit.

FYI I came across this issue and wherever the workaround it posted, I wasn't able to find it right away. This is how I'm handling it.

I'm building a library using rollup. The solution I came up with was to transpile these libraries into the CJS version for backwards compatibility, but not the ESM version. This will obviously only work for modules which don't have state. React and the DOM will be your enemy, so hopefully they don't ditch CJS anytime soon. I have a feeling this workaround is somewhere in the various further reading here. You would do the same thing if you were targeting CJS in your browser or whatever -- just transpile the ESM to CJS via rollup or webpack.

const esmExternal = (source: string) =>
  !source.startsWith('.') && !path.isAbsolute(source);

// we pack ESM-only packages for CJS users, just to be nice.
const esmOnlyPackages = [/unist/];

const cjsExternal = (source: string) =>
  esmExternal(source) &&
  !esmOnlyPackages.find((esmOnlyPackage) => esmOnlyPackage.test(source));

const sharedConfig = {
  input: 'whatever.ts',
  plugins: [ allThePlugins() ],
}

export default [
  {
    ...sharedConfig,
    external: esmExternal,
    output: [
      {
        file: pkg.module,
        format: 'es',
      },
    ],
  },
  {
    ...sharedConfig,
    external: cjsExternal,
    output: [
      {
        file: pkg.main,
        format: 'cjs',
      },
    ],
  },
];

from unist-util-visit.

Rollup is a bundler made for ESM. I don’t see why workarounds are needed to support ESM?

from unist-util-visit.