Erreur : Doit utiliser import pour charger le module ES : D:\node_modules\react -markdown \index.js require() des modules ES n'est pas supporté

Question

Actuellement, j'utilise "react": "17.0.2" et j'ai installé "react-markdown": "^7.0.1" via npm i react-markdown J'utilise ce paquet pour afficher le texte riche que je récupère à partir de mon CMS Strapi. J'ai utilisé le code suivant pour afficher le contenu :

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 },
  };
}

Mais lorsque je l'exécute, il me donne l'erreur suivante :

J'utilise le nœud v14.17.0 et j'ai essayé d'ajouter "type": "module" .

Mon paquet.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"
  }
}

Answer 1

Node traite actuellement votre .js comme CommonJS. Vous devez dire à Node de le traiter comme un module ES.

Essayez d'ajouter "type": "module" dans votre package.json fichier.

Vous pouvez le placer n'importe où au niveau supérieur. Par exemple :

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

Plus d'informations : package.json et extensions de fichiers - Documentation Node.js 14.x LTS