Uncaught ReferenceError: FroalaEditor is not defined

[happpppp]

I encountered this issue when using Froala in conjunction with Wiris' MathType for Froala Editor in a Vue3+typescript project
main.ts

import './assets/main.css'
import 'froala-editor/js/plugins.pkgd.min.js';
//Import third party plugins
import 'froala-editor/js/third_party/embedly.min';
import 'froala-editor/js/third_party/font_awesome.min';
import 'froala-editor/js/third_party/spell_checker.min';
import 'froala-editor/js/third_party/image_tui.min';
// Import Froala Editor css files.
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/css/froala_style.min.css';

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import VueFroala from 'vue-froala-wysiwyg';

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(VueFroala)

app.mount('#app')

demoView.vue

<template>
  <main class="main-box">
    <div id="app">
      <froala id="edit" :tag="'textarea'" :config="config" v-model:value="model"></froala>
    </div>
  </main>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import "@wiris/mathtype-froala3/wiris.js";

const config = {
  mathEnabled: true,
  mathTypeParameters: {
    editorParameters: {
      toolbarWidth: '600',
      toolbarHeight: '400',
    },
  },
  toolbarButtons: ['undo',
    'redo',
    'bold',
    'italic',
    '|',
    'wirisEditor',
    'wirisChemistry',
    'insertImage',],
  moreMath: {
    buttons: ['math'],
    align: 'left',
  },
  events: {
    initialized: () => {
      console.log('initialized');
    }
  }
};

const model = ref<string>('Edit Your Content Here!');
</script>
<style>
  .main-box {
    width: 100%;
    height: 100%;
  }
</style>