ERR_REQUIRE_ESM error in gatsby-recipes

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'
}

https://github.com/gatsbyjs/gatsby/blob/d04f563342f7679728738e623578dd712a34caca/packages/gatsby-recipes/package.json#L53

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 https://github.com/gatsbyjs/gatsby/blob/d04f563342f7679728738e623578dd712a34caca/packages/gatsby-recipes/rollup.config.js#L33-L38

All import Declaration will be transform to require Declaration

https://github.com/gatsbyjs/gatsby/blob/dcc32a7db3413c79c5d62f9f72d8aaafb39b58df/packages/gatsby-recipes/src/parser/index.js#L2

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 https://github.com/mdx-js/mdx/pull/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

https://github.com/sindresorhus/meta/discussions/15

I think more and more npm package will be esm-only in the future (e.g. https://github.com/sindresorhus/meta/discussions/15#discussioncomment-1263848), 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