CODEWITHSUNDEEP
webpackecmascript-6vue.jsbabeljs
3142 maple
3142 maple

Reputation: 895

import vue.js plugin is undefined

I have one project is a vue.js plugin, another is a vue.js SPA.

But I try to import my vue.js plugin in SPA project always undefined.

vue.js plugin export like this:

export function install(Vue,config){
  //do something
}

and it's webpack output is set to umd

And I import my plugin like this:

import MyPlugin from 'my-plugin'
console.log(MyPlugin)//undefined
Vue.use(MyPlugin)//throw error 'Cannot read property 'install' of undefined'

So I inspect code in compiled bundle.js then I saw this

console.log(_myplugin2.default);

But how can I make it force to use _myplugin2 as plugin?

Upvotes: 0

Views: 2443

Answers (2)

3142 maple
3142 maple

Reputation: 895

I finally use another script as webpack entry.

entry.js:

module.exports=require('./main')

main.js:

function install(Vue,config){
  //something
}
export default {install}

then it can be access in window.myplugin and import myplugin from 'myplugin'

Upvotes: 1

thanksd
thanksd

Reputation: 55644

Webpack is assuming that you have exported a default property.

You can do that like so:

export default {
  install: function(Vue,config) {
    //do something
  }
}

If you don't want to use default, you'll need to export it using a named variable:

export const MyPlugin = {
  install: function(Vue,config) {
    //do something
  }
}

And then specifically reference that variable reference that when importing:

import { MyPlugin } from 'my-plugin'

Here's a working example.

Upvotes: 1

Related Questions