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"
}
}
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 .
// ⛔️ 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.
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.
js file extension is treated as an ES module as long as we declare our package's type as module .
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.
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
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.
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 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.
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
Use this version
"dependencies": {
"react-markdown": "^6.0.0"
}
Then issue
npm install
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With