TypeError when used the 'MoleculeStructure.vue' in VUE

[ZhitaoTian]

Describe the bug

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
    <MoleculeStructure id="draw1" structure="NC(=O)CCC(N)C(=O)O" :width="350" :height="300"></MoleculeStructure>
  </div>
</template>

<script lang="ts">
  import { Options, Vue } from 'vue-class-component';
  import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
  import MoleculeStructure from '@/components/rdkit-js/examples/vue/src/components/MoleculeStructure.vue';

  @Options({
    components: {
      HelloWorld,
      MoleculeStructure,
    },
  })
  export default class Home extends Vue { }
</script>

bug goes below

MoleculeStructure.vue?0783:190 
    TypeError: window.initRDKitModule is not a function
    at eval (initRDKit.ts?c60a:16:1)
    at new Promise (<anonymous>)
    at eval (initRDKit.ts?c60a:15:1)
    at eval (MoleculeStructure.vue?0783:180:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:155:1)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:164:1)
    at hook.__weh.hook.__weh (runtime-core.esm-bundler.js?5c40:2682:1)
    at flushPostFlushCbs (runtime-core.esm-bundler.js?5c40:339:1)
    at flushJobs (runtime-core.esm-bundler.js?5c40:393:1)

[MichelML]

@ZhitaoTian this is not clear in the docs yet, but you have to extend the window object (at the root of your project), then it should remove the type errors:

declare global {
    interface Window {
        initRDKitModule: RDKitLoader;
    }
}

also you need to make sure this is included in your root index.html head tag (and must be loaded before your application code is loaded):

<script src="https://unpkg.com/@rdkit/rdkit@2022.3.5-1.2.1/dist/RDKit_minimal.js"></script>

lastly, I do not recommend importing the component from the examples, rather implement your own inspired by the example, as these are simply examples, not officially released and recommended components to use.

Let me know if this helps 👍

---

cc @adam-of-barot if you have further thoughts here

[adam-of-barot]

If you take a look at the Vue examples, you can see that you either have to include the typescript definitions (index.d.ts) in the tsconfig.json file, or provide the declarations in a seperate file (globals.d.ts), and include that in tsconfig.json.

But even if the TypeScript declarations are not recognized, the init file should execute regardless, provided that the script @MichelML mentioned is included in your index.html, or dynamically loaded in another way (not recommended).

[MichelML]

Considering this as closed, but please do reopen if the answers were not clear :thumbs up: