Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vite build error with mermaid version 10.9.0 #5453

Open
BossHogg97 opened this issue Apr 11, 2024 · 0 comments
Open

Vite build error with mermaid version 10.9.0 #5453

BossHogg97 opened this issue Apr 11, 2024 · 0 comments
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect

Comments

@BossHogg97
Copy link

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

@BossHogg97 BossHogg97 added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Apr 11, 2024
@BossHogg97 BossHogg97 changed the title Vite build error with 10.9.0 Vite build error with mermaid version 10.9.0 Apr 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Development

No branches or pull requests

1 participant