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.

[fcano-ut]

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.

I also had some other issues after solving this one. It's all about incompatible dependencies (@emotion/core seems to be specially problematic).

I posted in a comment how I managed to make it work (using the Gatsby docz theme, instead of docz directly).

[steffchep]

I also had some other issues after solving this one. It's all about incompatible dependencies (@emotion/core seems to be specially problematic).

I posted in a comment how I managed to make it work (using the Gatsby docz theme, instead of docz directly).

Thanks for responding! However, an issue such as this having been open since October kind of makes me hesitant to continue my evaluation of docz at this point.

[admirhusic]

+1

[nejcm]

I managed to fix this with the code below. The issue is some packages are not compatible and for each error given I had to find the one that is. The gatsby-recipes error was coming from node_modules/gatsby-cli on my side. Now this might not be the same for all. So you can also try downgrading the gatsby-recipes package inside resolutions. Good luck

"resolutions": {
    "babel-eslint": "10.1.0",
    "eslint": "7.19.0",
    "gatsby-cli": "^3.14.2"
  }

[pedronauck]

This is happening mainly because all new packages related to Unified are ESM. The new version I'm creating right now fixes this issue :)

[ParseDark]

same issue..

[dan-cooke]

Any updates on when this version will be released @pedronauck ? This library is currently unusable for modern toolchains - unfortunately have to go back to storybook

[TomaszWaszczyk]

Same here.