CODEWITHSUNDEEP
javascriptvue.jsvuejs2
user11280819
user11280819

Reputation: 1

importing a js library throws this undefined

I've been trying every variation but I don't understand why I can't include this library: jkanban.js 

<template>
  <div id="kanban"></div>
</template>

<script>

import jKanban from '../components/jkanban.js'

export default {

}

</script>

I get the error in the console:

Cannot set property 'jKanban' of undefined

After looking closely, I can see this is undefined.

This works fine without vue so I'm not sure what is wrong here.

Internally, that library is doing the following:

(function () {

    this.jKanban = function () {
        var self = this;
...

Upvotes: 0

Views: 379

Answers (1)

mrrrk
mrrrk

Reputation: 2301

So here's what I did (it's from a Vue 3 project but should work for React, older Vue, etc.)...

From the source code (https://github.com/riktar/jkanban) copy the jkanban.js file from the root source folder (NOT from the dist folder - which includes the code for the dragula libray plus a bunch of stuff to support require as far as I can tell) into a folder in your own project.

Add the dragula library: npm install dragula.

Then some code edits. For some reason, the dragula libray keeps throwing because there's no global object, so I tried adding this: const gobal = window; (in a script tag in the index.html but I guess it could go elsewhere.)

I also edited the to the jKanban.js file, at the top:

import dragula from "dragula";  // change from require

const jKanban = function () {
    var self = this
    var __DEFAULT_ITEM_HANDLE_OPTIONS = {
   // etc. etc...

And at the bottom:

    //init plugin
    this.init()
}

export default jKanban; // export it

And after all that, I was able to import it and use it in a component:

import jKanban from "@/stuff/jkanban.js";
// ...stuff
const kanban = new jKanban(someOptionsIPreparedEarlier);

You'll also need to include the CSS file of course. And if there are any updates to the library, you'll need to pull them in manually.

:o)

Upvotes: 1

Related Questions