No I haven't found any solution. I have tried using esm, eg const visit = require('esm')(module)('unist-util-visit').default without much success.

Update: I got the update to rehype-slug@5.0.0 in my gatsby-config.js working by installing esm and patch-package and:

1. Modifying the gatsby-config.js as follows (to allow require() with the pure ES Modules)

   +require = require('esm')(module);
   module.exports = {
     plugins: [
       {
         resolve: `gatsby-plugin-mdx`,
         options: {
           rehypePlugins: [
   -          require('rehype-slug'),
   +          require('rehype-slug').default,

2. Try running the Gatsby dev server and see what breaks. It will throw an error either like this:

     Error: Must use import to load ES Module: /Users/k/p/project/node_modules/rehype-slug/index.js
     require() of ES modules is not supported.
     require() of /Users/k/p/project/node_modules/rehype-slug/index.js from /Users/k/p/project/gatsby-config.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 /Users/k/p/project/node_modules/rehype-slug/package.json.
   

   ...or like this:

     Error: /Users/k/p/project/gatsby-config.js:1
     Error: Must use import to load ES Module: /Users/k/p/project/node_modules/rehype-slug/index.js
   

3. Make a note of the location of the pure ES Modules package so that you can locate the package.json file corresponding to the pure ESM package and manually remove the line with "type": "module", like this:

   -  "type": "module",

4. Run yarn patch-package <pkg name> --exclude '^$', which will record the changes that you have made in the package.json file (to be reapplied by patch-package every time that you run yarn or npm install). Examples:

   # For a top-level dependency
   yarn patch-package rehype-slug --exclude '^$'
   
   # For a transitive dependency
   yarn patch-package rehype-slug/unist-util-visit --exclude '^$'

5. Run the Gatsby dev server again, and repeat step 3 and 4 for every pure ESM package.

At that point, I could start the Gatsby dev server with the new pure ESM dependency versions.

cc @Ir1d @kimbaudi @wardpeet @LekoArts

Caveat: In my specific case, I needed to also patch one of the dependencies (hast-util-heading-rank) because I was getting an undefined node.tagName, but I think this is unrelated to this problem - probably related to a different issue.

We are currently using a solution that compile ES module using esm then forcing node to require it by catching ERR_REQUIRE_ESM
This way will not need any extra changes to external dependencies from npm
It is still a workaround whatever but it works
https://gist.github.com/diauweb/f9f7be271ecc7bc0aecaf3dc891e18d2

I guess this is why I have not managed to run tests using https://playwright.dev/ and keep getting errors concerning .mjs, not being able to find modules, modules not being defined in ES module scope when trying to run tests and not being able to set "type": "module" in package.json.

I spent a few hours trying to get it work. But am giving up.

I would appreciate if someone could tell me if this could be because of this issue or if I am simply doing something wrong?

With the new TypeScript configs from Gatsby 4.9, it's possible to patch only a single Gatsby internal file with all of the ESM packages, much easier!

#34613 (reply in thread)

We've started work on this, you can follow the milestone: https://github.com/gatsbyjs/gatsby/milestone/15 (no ETA!)

We'll first make gatsby-config.mjs and gatsby-node.mjs work correctly, afterwards gatsby-config.ts and gatsby-node.ts will follow.

Once we have a version published you can try out you'll find all details in the umbrella discussion - you can then also post your feedback there.

Hi! A couple questions for everyone we'd like your feedback on:

1. Do you use primarily ESM features (e.g. import/export modules, import.meta, etc.), CJS features (e.g. require, module.exports, __filename, __dirname, etc.) or both in your gatsby-config.ts and gatsby-node.ts files? If you can, please share a gist!
2. What do you expect to work in your gatsby-config.ts and gatsby-node.ts files? All ESM and CJS features? One or the other? A subset of either?

Does esm work in a js gatsby project? I get the following error when starting develop, I npm i esm and added gatsby-node.esm.js with content of gatsby-node.js:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension "" for /Users/thome/tire/.cache/tmp-86565-2GrsbTzxTLRk. Loading extensionless files is not supported inside of "type":"module" package.json contexts. The package.json file /Users/thome/tire/package.json caused this "type":"module" context. Try changing /Users/thome/tire/.cache/tmp-86565-2GrsbTzxTLRk to have a file extension. Note the "bin" field of package.json can point to a file with an extension, for example {"type":"module","bin":{"tmp-86565-2GrsbTzxTLRk":"./.cache/tmp-86565-2GrsbTzxTLRk.js"}}

ERROR

Error in "/root/smutt_hole/Gatsby_ellipsis_system/node_modules/gatsby-source-hubspot/gatsby-node.js": require() of ES Module
/root/smutt_hole/Gatsby_ellipsis_system/node_modules/gatsby-source-hubspot/node_modules/node-fetch/src/index.js from
/root/smutt_hole/Gatsby_ellipsis_system/node_modules/gatsby-source-hubspot/gatsby-node.js not supported.
Instead change the require of index.js in
/root/smutt_hole/Gatsby_ellipsis_system/node_modules/gatsby-source-hubspot/gatsby-node.js to a dynamic import() which is
available in all CommonJS modules.

Error: [ERR_REQUIRE_ESM]: require() of ES Module /root/smutt_hole/Gatsby_ellipsis_system/node_modules/gatsby-source-hubspot/no
de_modules/node-fetch/src/index.js from /root/smutt_hole/Gatsby_ellipsis_system/node_modules/gatsby-source-hubspot/gatsby-node
.js not supported.
Instead change the require of index.js in /root/smutt_hole/Gatsby_ellipsis_system/node_modules/gatsby-source-hubspot/gatsby-no
de.js to a dynamic import() which is available in all CommonJS modules.

I'm trying to set up ESM on my gatsby website but it fails with

> my-gatsby-site@1.0.0 develop
> gatsby develop

node:internal/errors:490
    ErrorCaptureStackTrace(err);
    ^

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension "" for /home/peter/sites/my-gatsby-site/.cache/tmp-71701-szMR8p4vhwap. Loading extensionless files is not supported inside of "type":"module" package.json contexts. The package.json file /home/peter/sites/my-gatsby-site/package.json caused this "type":"module" context. Try changing /home/peter/sites/my-gatsby-site/.cache/tmp-71701-szMR8p4vhwap to have a file extension. Note the "bin" field of package.json can point to a file with an extension, for example {"type":"module","bin":{"tmp-71701-szMR8p4vhwap":"./.cache/tmp-71701-szMR8p4vhwap.js"}}
    at new NodeError (node:internal/errors:399:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:121:38)
    at defaultLoad (node:internal/modules/esm/load:81:20)
    at nextLoad (node:internal/modules/esm/loader:163:28)
    at ESMLoader.load (node:internal/modules/esm/loader:605:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
    at new ModuleJob (node:internal/modules/esm/module_job:64:26)
    at #createModuleJob (node:internal/modules/esm/loader:480:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

I decided to try debugging it through a fresh gatsby instance, but it also failed there (with the same error).

what I did

gatsby new
What would you like to call your site?
✔ · My Gatsby Site
What would you like to name the folder where your site will be created?
✔ sites/ my-gatsby-site
✔ Will you be using JavaScript or TypeScript?
· JavaScript
✔ Will you be using a CMS?
· No (or I'll add it later)
✔ Would you like to install a styling system?
· styled-components
✔ Would you like to install additional features with other plugins?
MDX

then, I:

• added "type": "module" to package.json
• renamed gatsby-config.js -> gatsby-config.mjs
• changed module.exports into export default.

What else needs to be done in order to successfully launch build and develop commands? I feel that I'm missing something obvious.