mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

Home Page:https://mermaid.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vite build error with mermaid version 10.9.0

BossHogg97 opened this issue · comments

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