Tippy as a VueJS directive : webpack compilation error (_tippy2.default is not a constructor)

Hi !

First, thanks for your great tooltip library 😃 I don’t know if my problem comes from tippy, vuejs, webpack… So i try my chance here ^^

I’m trying to create a vuejs directive, to generate tippy tooltips into my SPA (compiled with webpack2)

My Vuejs Directive file :

import Vue from 'vue'
import Tippy from 'tippy'

Vue.directive('tippy', {
        inserted(el) {
            const tooltip = new Tippy(el, {
                arrow: true
            })
        }
})

In my Webpack.config file, i created an alias to resolve the tippy.js dist file only, cuz i don’t want to import the scss file too :

...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      tippy$: 'tippy.js/dist/tippy.js'
    }
  }
...

When compiling, Webpack returns an error : TypeError: _tippy2.default is not a constructor...

WORKAROUND : If i include tippy.js into my index.html file, and remove my import Tippy from ‘tippy’ in my directive file tooltips works !!

index.html : <script src="node_modules/tippy.js/dist/tippy.js"></script> My directive file :

import Vue from 'vue'

Vue.directive('tippy', {
        inserted(el) {
            const tooltip = new Tippy(el, {
                arrow: true
            })
        }
})

My wish is to include Tippy from my directive file, and remove it from my index.html file. Please can someone could telle me where i am wrong ? Thanks 😃

[ALPIXELMaiki]

Not again 😦

But after a search, i found it : http://stackoverflow.com/questions/20534702/node-js-use-of-module-exports-as-a-constructor

Since you can attach a function directly to module.exports you can essentially return a function and like any function it could be managed as a constructor

So i tried to modifiy your dist file by adding (at the very end) : module.exports = o;window.Tippy=o AND IT WORKS.

So, in your source code, i think you have to write this : (in src/js/tippy.js, at the very end of the file)

module.exports = Tippy
window.Tippy = Tippy

Add the module.exports line, compile and submit a v0.5.0 😃

Regards,

[ALPIXELMaiki]

It works now 😃

Thanks for your work !