Can't find global mermaid error message. How can I solve it?

[mcdoyaji]

I Got error like below :

I load plugin And scripts like below :

yarn add docute-mermaid

https://github.com/baram204/vue-typescript-excer/blob/master/website/index.js

import docuteMermaid from 'docute-mermaid'

new Docute({
  ......
  plugins: [
    // process.env.NODE_ENV === 'production' && googleAnalytics('UA-54857209-11'),
    docuteMermaid()
  ].filter(Boolean)

https://github.com/baram204/vue-typescript-excer/blob/master/src/views/Home.vue

  mounted() {
    if (!window[INITIAL_STATE_NAME]) {
      this.fetchFile(this.decodedRoute.path).then(this.setInitialState)
    }
    this.addScript(this.mermaid)
    this.addScript(this.docuteMermaid)
  },

  methods: {
    addScript(src) {
      window.addEventListener('load', () => {
        const script = document.createElement('script')
        script.src = src
        script.async = true
        script.defer = true
        document.body.appendChild(script)
      })
    }
  },

  data() {
    return {
      mermaid:
        'https://cdn.jsdelivr.net/npm/mermaid@8.0.0-rc.8/dist/mermaid.min.js',
      docuteMermaid:
        'https://cdn.jsdelivr.net/npm/docute-mermaid@1/dist/index.min.js'
    }
  }

All scripts loaded dom.

But mermaid works like normal fenced code.

So What Should I do If I want to display mermaid code properly??

[egoist]

Load mermaid before new Docute

[mcdoyaji]

OK. there's no index.html so I use javascript native way. ref here

window.mermaid = require('mermaid');

I'm not sure this is proper way. some hard-coded...

Anyway. Anybody like me follow below way.

1. Install packages.

yarn add docute-mermaid
yarn add mermaid

2. Edit \website\index.js file.

......
import docuteMermaid from 'docute-mermaid'

// add mermaid before docute-mermaid plugins loaded
window.mermaid = require('mermaid');

new Docute({
  target: 'app',
  title: 'Docute',
  layout: 'wide',
  highlight: ['typescript', 'bash', 'json', 'markdown'],
  plugins: [
    // then apply docute-mermaid plugin
    docuteMermaid()
  ].filter(Boolean),