Vite build error with mermaid version 10.9.0
BossHogg97 opened this issue · comments
Marco Asta commented
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