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

[ALPIXELMaiki]

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]

I have the same error :

My directive file :

import Tippy from 'tippy'
window.Tippy = Tippy

TypeError: _tippy2.default is not a constructor

[atomiks]

I'm switching to Rollup for bundle generation for v0.4.0 so it might solve the issue...

[ALPIXELMaiki]

Thanks !
So I'll wait for v0.4.0 👍

[atomiks]

v0.4.0 is out now... give it a try

[ALPIXELMaiki]

Not :(

Always the same error...
import Tippy from 'tippy.js' always returns _tippy2.default is not a constructor

[atomiks]

Maybe try import { Tippy } from 'tippy.js'?

[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,

[atomiks]

I had that in v0.3.5, but with Rollup it broke when using the browser version so I removed it, lol

The browser version works too if I do export default class Tippy { ...

I solved it... need to export it from the main.js Rollup entry file, I believe

[atomiks]

v0.4.1 should work now, can you test it out?

[ALPIXELMaiki]

It works now :)

Thanks for your work !