ERR_REQUIRE_ESM error in gatsby-recipes

[dangreen]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

/Users/dangreen/github/react-chartjs-2/node_modules/gatsby-recipes/dist/graphql-server/server.js:52
var remarkMdx = require('remark-mdx');
                ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/dangreen/github/react-chartjs-2/node_modules/gatsby-recipes/node_modules/remark-mdx/index.js from /Users/dangreen/github/react-chartjs-2/node_modules/gatsby-recipes/dist/graphql-server/server.js not supported.
Instead change the require of index.js in /Users/dangreen/github/react-chartjs-2/node_modules/gatsby-recipes/dist/graphql-server/server.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/dangreen/github/react-chartjs-2/node_modules/gatsby-recipes/dist/graphql-server/server.js:52:17) {
  code: 'ERR_REQUIRE_ESM'
}

gatsby/packages/gatsby-recipes/package.json

Line 53 in d04f563

"remark-mdx": "^2.0.0-next.4",

remark-mdx@^2.0.0-next.4 resolves to remark-mdx@2.0.0-rc.1 which is ESM only package

Reproduction Link

https://codesandbox.io/s/cocky-sound-og3zh?file=/package.json

Steps to Reproduce

1. yarn add -D docz react react-dom
2. yarn docz dev

Expected Result

All works without any errors.

Actual Result

ERR_REQUIRE_ESM error

Environment

System:
    OS: macOS 11.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.10.0 - /var/folders/h2/gn99zpsn25j5w47332yy8jfw0000gn/T/yarn--1635416469908-0.7042407843892959/node
    Yarn: 1.22.13 - /var/folders/h2/gn99zpsn25j5w47332yy8jfw0000gn/T/yarn--1635416469908-0.7042407843892959/yarn
    npm: 7.24.0 - ~/.nvm/versions/node/v16.10.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 95.0.4638.54
    Firefox: 91.0.2
    Safari: 15.0

Config Flags

No response

[Hannah-goodridge]

Any update on this? Its affecting me too.

[iChenLei]

Gatsby use rollup to bundle gatsby-recipes package,

here is rollup config -> packages/gatsby-recipes/rollup.config.js

gatsby/packages/gatsby-recipes/rollup.config.js

Lines 33 to 38 in d04f563

	output: {
	dir: `dist`,
	entryFileNames: `[name].js`,
	format: "cjs",
	sourcemap: true,
	},

All import Declaration will be transform to require Declaration

gatsby/packages/gatsby-recipes/src/parser/index.js

Line 2 in dcc32a7

import remarkMdx from "remark-mdx"

to

https://cdn.jsdelivr.net/npm/gatsby-recipes@1.2.0/dist/graphql-server/server.js

var remarkMdx = require('remark-mdx');

https://github.com/mdx-js/mdx/blob/main/packages/remark-mdx/package.json#L34

remark-mdx breaking change -> pr mdx-js/mdx#1661

The CommonJS module require always treats the files it references as CommonJS.
Using require to load an ES module is not supported because ES modules have asynchronous execution. Instead, use import() to load an ES module from a CommonJS module.

https://nodejs.org/api/esm.html#require

sindresorhus's The ESM move

sindresorhus/meta#15

I think more and more npm package will be esm-only in the future (e.g. sindresorhus/meta#15 (comment)), so gatsby need care this trends.

Temporary workaround

lock remark-mdx version in gatsby-recipes/package.json

- ^2.0.0-next.4
+ 2.0.0-next.9

But it's not long-term solutions, esm is future. cc @wardpeet

[iChenLei]

https://nodejs.org/api/esm.html#import-expressions

It’s worth noting that the only way to import ESM files from a CJS module is using dynamic import() calls. This can present challenges, but is the behavior in Node.js today.

[jonasdev]

Any updates?

[worldomkar]

yarn add @mdx-js/mdx @mdx-js/react

in newly created gatsby project moves @mdx-js/mdx versions from "v1" to ==> "^2.1.1".

Then this is seen:
Error: [ERR_REQUIRE_ESM]: require() of ES Module /Volumes/source/websites/new-gatsby-site/node_modules/@mdx-js/mdx/index.js from /Volumes/sourc e/websites/new-gatsby-site/node_modules/gatsby-plugin-mdx/utils/mdx.js not supported. Instead change the require of index.js in /Volumes/source/websites/new-gatsby-site/node_modules/gatsby-plugin-mdx/utils/mdx.js to a dynamic import() which is available in all CommonJS modules.

The expectation is newer versions of packages will be always compatible, updated and use the latest standards and best practices.
Can't wrap my head around why "v1" works but not "^2.1.1". Doesn't sound right.

If I manually edit package.json and revert @mdx-jx/mdx and @mdx-js/react versions to "v1", and run yarn install, it starts to work again.

I may be missing something very silly basic, but what??

[cgarrovillo]

Think this needs to be reopened

[TomaszWaszczyk]

I have probably the error.

[0x80]

I just bumped into this trying to run an old project.

I solved it by locking remark-mdx using the resolutions field in package.json:

"resolutions": {
    "remark-mdx": "1.6.22"
  },

Don't know if it will be picked up by all package managers. I was using Yarn classic, and had to remove my node_modules first.