External Script: not a constructor error

I’m trying to get a third party JS script working on our Vue.JS project and failng because
"TypeError: treantjs__WEBPACK_IMPORTED_MODULE_0___default.a is not a constructor"

I’ve set up a single component application following the logic from Treant.js. The following is how Treant expects to be set up:

<head>
  ... 
  <link rel="stylesheet" href="Treant.css" type="text/css"/>
  <script src="vendor/raphael.js"></script>
  <script src="Treant.min.js"></script>
</head>
<body>
  ...
  <div id="tree-simple" style="width:335px; height: 160px"> </div>
  ...
</body>
<script>
  var chart_config = { ... }
  var my_chart = new Treant(chart_config);
</script>

The following is the logic that I have used for my test application
main.js

import Vue from 'vue'
import App from './App.vue'

import 'raphael'
import 'treantjs/Treant.css'
import 'treantjs/Treant'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

app.vue

<template>
  <div id="app">
    <TreantTest />
  </div>
</template>
<script>
import TreantTest from './components/TreantTest.vue'

export default {
  name: 'App',
  components: { TreantTest }
}
</script>

TreantTest.vue

<template>
  <div>
    <div id="basic-example" style="width:335px; height: 160px"> </div>
  </div>
</template>

<script>
import Treant from 'treantjs'
export default {
  name: 'TreantTest',
  data () {
    return {
      treantChart: null,
      simple_chart_config: { ...  }
    }
  }
  created () {
    this.treantChart = new Treant(this.simple_chart_config)
  }
}
</script>

I’m assuming that I am missing something from my registration, so what am I doing wrong?

Is your project available on git? Can be easier to try and help you.

Try this in your main.js:

import Raphael from "raphael";

window.Raphael = Raphael

var Treant = require("treant-js/Treant")
Treant = Treant.Treant

Similar problem with React

1 Like

I had a try of the suggestion. Raphael registered correctly, but Vue didn’t like me trying to use require

I’ve put my code on a repo below.

GitHub

TreantTest.vue

created() {
  this.treantChart = new window.Treant(this.simple_chart_config)
}

I don’t have the webpack error anymore, just an other from the lib

Error in created hook: “ReferenceError: selector is not defined”

Edit:
You have to use mounted instead of created. And force to set Raphael in window.

import Raphael from 'raphael'
import 'treantjs/Treant.css'
import 'treantjs/Treant'

window.Raphael = Raphael

1 Like

Thank you very much. This does the trick - now to see it it scales to the main Project!

Is this solution specific to how Treant works, or is it a more general approach to using third part JS modules?

Happy to help!

It’s specific for libraries without UMD/CommonJS support.
Most often you can import and use like this:

import $ from 'jquery'
1 Like

Hi @dankelly, I’m currently trying to get treant to work with vue and this was one of the only Google results I found for it. The github links you and @shenron posted are no longer active. Does that solution still exist online somewhere?

Thanks so much for your help!

I’ve previously forked the project and just fixed it, you should be able to do:

npm ci
npm run serve

Thank you so much, this helped me get it up and running!

We just ended up importing treant into main which let us instantiate a new chart using
(I suspect that we can probably move the import into the local.

this.chart = new window.Treant(mainTreeConfig)

The construction of the config is pretty complex on our side, but in the end not far off the examples.