Next js Mermaid Rendering issue

[ShubhodeepSen47]

Here is next js code I am not able to render the following mermaid im not able to render the mermaid diagram using next js
1 of 1 unhandled error
Next.js (13.5.4) is outdated (learn more)

Unhandled Runtime Error
SyntaxError: The requested module 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js' does not provide an export named 'default'

@sidharthv96 @jihchi @jclem @WeeJeWel @trentlarson

[ShubhodeepSen47]

Here is my Nextjs Page Code

"use client";
import React, { useEffect } from "react";
import remarkGfm from "remark-gfm";
import rehypeRaw from "rehype-raw";
import ReactMarkdown from "react-markdown";
import Script from "next/script";
import Navbar from "../Components/Navbar";

const post = `# Mermaid Diagram Example

This is a simple example of a Mermaid flowchart diagram:

\`\`\`mermaid
graph TD
    A[Start] --> B[Process 1]
    B --> C[Process 2]
    C --> D[End]
\`\`\`


\`\`\`mermaid
graph LR;
A-->B;
B-->C;
B-->D[plop lanflz eknlzeknfz];
\`\`\`
`;

export function Diagram() {
  useEffect(() => {
    import("mermaid").then((mermaid) => {
      mermaid.default.initialize({ startOnLoad: true });
      mermaid.default.contentLoaded();
      
    });
  }, []);

  return (
    <div>
      <Navbar />
      <div className="diagram-container">
        <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
          {post}
        </ReactMarkdown>
        <div className="mermaid">
          {`erDiagram
            ATLAS-ORGANIZATION ||--|{ ATLAS-PROJECTS : "has many"
            ATLAS-PROJECTS ||--|{ MONGODB-CLUSTERS : "has many"
            ATLAS-PROJECTS ||--|{ ATLAS-TEAMS : "has many"
            MONGODB-CLUSTERS ||..|{
            ATLAS-TEAMS ||..{|`}
        </div>
          <div className="mermaid">
            {`
              ---
              title: Node with text
              ---
              flowchart LR
                  id1[This is the text in the box]
            
              `}
          </div>
        <Script
          type="module"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js";
              mermaid.initialize({ startOnLoad: true });
              mermaid.contentLoaded();
            `,
          }}
        />
      </div>
      <style jsx>{`
        .diagram-container {
          margin: 1rem;
          padding: 1rem;
          border: 1px solid #ccc;
          border-radius: 0.5rem;
        }
      `}</style>
    </div>
  );
}

export default Diagram;

[ShubhodeepSen47]

Package.json

"dependencies": {
    "@mdx-js/loader": "^3.0.0",
    "@mdx-js/react": "^3.0.0",
    "@next/mdx": "^14.0.1",
    "@ory/client": "^1.2.11",
    "@ory/integrations": "^1.1.5",
    "@ory/kratos-client": "^1.0.0",
    "@tinymce/tinymce-react": "^4.3.0",
    "@tiptap/pm": "^2.1.12",
    "@tiptap/react": "^2.1.12",
    "@tiptap/starter-kit": "^2.1.12",
    "@types/mdx": "^2.0.10",
    "axios": "^1.5.1",
    "bootstrap": "^5.3.2",
    "mermaid": "^10.6.1",
    "next": "13.5.4",
    "novel": "^0.1.22",
    "react": "^18",
    "react-dom": "^18",
    "react-markdown": "^9.0.0",
    "react-mermaid": "^0.1.3",
    "react-router-dom": "^6.17.0",
    "react-toastify": "^9.1.3",
    "rehype-raw": "^7.0.0",
    "remark-gfm": "^4.0.0",
    "tinymce": "^6.7.1"
  },``