ERR_REQUIRE_ESM error on start

[dangreen]

Bug Report

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

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

Environment

• docz version: 2.3.1
• OS: macOS 11.6
• Node/npm version: Node 16, yarn 1

[dangreen]

gatsbyjs/gatsby#33713

[absozero]

I have this issue as well, running the same versions of the environment as @dangreen is, except I am using windows 10.

[tiagoalvesdulce]

+1

[fernandoabolafio]

+1

[ShrijanaCodes]

I am running into this issue as well. Are there any workarounds?

[drewlustro]

@ShrijanaCodes – unfortunately no. I fought with this one for several hours and gave up.

[drewlustro]

Wow, I may have just got Node 15 working.

Here are the required package upgrades / resolutions:

"devDependencies": {
  "babel-preset-gatsby": "0.12.3"
}

"dependencies": {
  "node-sass": "5.0.0",
  "gatsby-plugin-sass": "3.0.0"
}

"resolutions": {
  "node-sass": "5.0.0",
  "**/node-sass": "5.0.0",
  "**/sharp": "0.29.2",
  "sass-loader": "10.0.5",
  "**/sass-loader": "10.0.5"
}

[uuryildirim]

I think "remark-mdx" is the problem. It work on my computer with yarn. I dont tested with npm.

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

Env specs:
node: 14.17.6
yarn: 1.22.0
npm: 6.14.15

[markgong-gd]

+1

[fcano-ut]

If you're using npm (where "resolutions" is not available), you can install this version of remark-mdx to bypass this issue:

npm install remark-mdx@2.0.0-next.9 --save-dev

[gmonte]

Any updates? The above solutions doesn't work for me.

Env specs:
docz: 2.3.1
node: 16.13.1
yarn: 1.22.17
npm: 8.1.2

[Arun-kc]

I too am facing this same issue. Is there any workaround for this?

[steffchep]

Same issue here. So much for quickly trying this thing out to see if it is what I need... (fresh project set up as of yesterday, via create-react-app and then installing docz, following the documentation. Using npm)

Manually installing the above mentioned version of remark-mdx fixes it partially. docz dev starts, but with a Gatsby error regarding require() of ES modules not being supported. Thus, generating development bundle fails, and the server delivers a blank page with a common.js error in the console.

Windows 10, node 16.3.0, npm 8.5.0

So... Storybook it is.