Error: Must use import to load ES Module: D:\node_modules\react-markdown\index.js require() of ES modules is not supported

Question

Currently I'm using "react": "17.0.2" and I have installed "react-markdown": "^7.0.1" via npm i react-markdown I'm using this package to display my rich text that I'm fetching from my Strapi CMS. I have used the following code to display the content:

import ReactMarkdown from "react-markdown";

export default function name({ posts }) {
  return (
    <>
      <div>
        <div>
          {posts.Title}
        </div>
      </div>
      <div>
        <ReactMarkdown source={posts.Content} escapeHtml={false} />
      </div>
    </>
  );
}

export async function getStaticProps() {
  const res = await fetch("http://localhost:1337/blogs");
  const posts = await res.json();

  return {
    props: { posts },
  };
}

But when I run this it gives me the following error:

I'm using node v14.17.0 and have tried adding "type": "module".

My package.json:

{
  "name": "passportlegacy",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "babel-plugin-inline-react-svg": "^2.0.1",
    "next": "11.0.1",
    "next-images": "^1.8.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-map-gl": "^6.1.16",
    "react-markdown": "^7.0.1",
  },
  "devDependencies": {
    "@svgr/webpack": "^5.5.0",
    "@types/react": "17.0.16",
    "eslint": "7.32.0",
    "eslint-config-next": "11.0.1",
    "typescript": "4.3.5"
  }
}

https://stackoverflow.com/questions/61670459/nodejs-must-use-import-to-load-es-module — Ali Klein, Sep 08 '21 at 03:21

Håken Lid · Accepted Answer · 2022-02-01T21:34:01.847

13

I solved this by just pinning react-markdown to version 6.

With version 7 of react-markdown they moved to ESM only. There's a explanation of what that means here, but it seems Jest (version 27) still only has experimental support for pure ESM modules as of October 2021. I couldn't get it to work in my project, and version 6 of react-markdown works fine for now.

I think the next major version of Jest (version 28) might support ESM.

edited Feb 01 '22 at 21:34

answered Oct 06 '21 at 16:44

Håken Lid

22,318
9
52
67

They moved to pure ESM prematurely. They could have built a hybrid package like everyone else is doing. – Steve Aug 11 '22 at 14:48
Yes. And I think Jest 28 is still blocked from supporting ESM by nodejs https://github.com/nodejs/node/issues/37648 – Håken Lid Aug 11 '22 at 15:17

score 4 · Answer 2 · edited Sep 01 '21 at 10:23

4

Node is currently treating your .js file as CommonJS. You need to tell Node to treat it as an ES module.

Try adding "type": "module" in your package.json file.

You can place it anywhere at the top level. E.g.:

{
  "name": "passportlegacy",
  "version": "0.1.0",
  "type": "module",
  "private": true,
  "scripts": {
    ...
  }
  ...
}

More information: package.json and file extensions - Node.js 14.x LTS documentation

edited Sep 01 '21 at 10:23

RobC

22,977
20
73
80

answered Sep 01 '21 at 07:16

Akasha

969
5
8

Where exactly should I place "type": "module" in my package.json? – Jay Modi Sep 01 '21 at 07:32
You can place it anywhere at the top level. I added an example in the answer. – Akasha Sep 01 '21 at 07:42

score 3 · Answer 3 · edited Feb 13 '22 at 06:31

3

Use this version

"dependencies": {
    "react-markdown": "^6.0.0"
  }

Then issue

npm install

edited Feb 13 '22 at 06:31

Peter Csala

17,736
16
35
75

answered Feb 12 '22 at 20:46

mr_a_top

61
3

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 13 '22 at 06:31

Error: Must use import to load ES Module: D:\node_modules\react-markdown\index.js require() of ES modules is not supported

3 Answers3