Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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:

enter image description here

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"
  }
}
like image 681
Jay Modi Avatar asked Sep 01 '21 05:09

Jay Modi


People also ask

How do you solve require () of ES modules is not supported?

You can solve the "[ERR_REQUIRE_ESM]: require() not supported" by doing one of two things: Use ESM - use import foo from 'foo' , instead of const foo = require('foo') and add the following line to your package. json file: "type": "module" . Downgrade to the last version of the package that is built with CommonJS .

How do I load ES module set type module in the package json?

// ⛔️ To load an ES module, set "type": "module" in // package. json import moment from 'moment'; moment(). format(); To be able to load ES modules, set the type property to module in your project's package.

How do I enable ES modules in node js?

To be able to load an ES module, we need to set “type”: “module” in this file or, as an alternative, we can use the . mjs file extension as against the usual . js file extension. Also, from Node version 12.7.

Is an ES module file a .js file?

js file extension is treated as an ES module as long as we declare our package's type as module .

Is require() of ES modules is not supported?

It'll be solved for you. the error Require () of ES modules is not supported occurs because you installed node-fetch version 3 and you can downgrade and install version 2. Your issue will be solved.

What is the use of Es import in Node JS?

It lets you use standard es modules rather than common js. If you don’t understand that, then change the import x from "y" to normal Node require style imports

Does jest 27 support ESM modules?

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.

Does jest support react-Markdown 7?

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.


3 Answers

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.

like image 79
Håken Lid Avatar answered Oct 19 '22 09:10

Håken Lid


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

like image 20
Akasha Avatar answered Oct 19 '22 07:10

Akasha


Use this version

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

Then issue

npm install 
like image 1
mr_a_top Avatar answered Oct 19 '22 09:10

mr_a_top