Vite build error with mermaid version 10.9.0

[BossHogg97]

Description

Hi, i'm developing a Vue 3 + Vite application where i need to visualize mermaid graphs. During development process (pnpm dev command) i successfully view graphs but when i build the project i have the following error on application startup:

Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'prototype')
    at kS (index-a6050d12.js:564:23131)
    at index-a6050d12.js:564:26435
    at index-a6050d12.js:1608:2692

Here the code i wrote:

<script setup lang="ts">
  import mermaid from 'mermaid' // https://mermaid.js.org/config/usage.html

  type Props = {
    source?: string
  }
  const props = defineProps<Props>()

  let mermaidAPI = mermaid.mermaidAPI
  mermaidAPI.initialize({
    startOnLoad: false,
    securityLevel: 'sandbox'
  })

  setTimeout(async () => {
    await render(props.source)
  }, 1200)

  async function render(str) {
    let id = 'customGraph'
    const { svg } = await mermaidAPI.render(`mermaid-${id}`, str)
    document.getElementById('dynamicDiagram').innerHTML = svg
  }
</script>

<template>
  <div border-solid border-1 rounded-md border-slate-200>
    <n-card hoverable :bordered="false">
      <div class="flex mx-auto my-auto" :style="{ height: '700px' }">
        <div id="dynamicDiagram"></div>
      </div>
    </n-card>
  </div>
</template>

<style>
  #dynamicDiagram {
    padding-left: 2em;
    flex: 1;
  }
</style>

Thanks for any support!

Steps to reproduce

No step

Screenshots

No response

Code Sample

No response

Setup

• Mermaid version: 10.9.0
• Browser and Version: [Chrome, Edge, Firefox]

Suggested Solutions

No response

Additional Context

No response

[wong2]

I met the same error

[tuanhuydev]

I had the same issue in ReactJS. everything is perfect til the QA deployment.