vuejs-datatable: Error "Cannot read property 'use' of undefined"

I’m importing and using as per docs:

import Vue from 'vue';
import DatatableFactory from 'vuejs-datatable';

Vue.use(DatatableFactory);

And i’m getting the following error:

vuejs-datatable.js:1 Uncaught TypeError: Cannot read property 'use' of undefined
    at eval (vuejs-datatable.js:1)
    at Object.eval (vuejs-datatable.js:1)
    at eval (vuejs-datatable.js:4)
    at Object../node_modules/vuejs-datatable/dist/vuejs-datatable.js (bundle.min.js:1550)
    at __webpack_require__ (bundle.min.js:725)
    at fn (bundle.min.js:102)
    at eval (main.js:5)
    at Module../src/main.js (bundle.min.js:1979)
    at __webpack_require__ (bundle.min.js:725)
    at bundle.min.js:792

I tried `window.Vue = Vue;’ with no luck, thinking that it was related to #28

What could it be?

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 24 (7 by maintainers)

Commits related to this issue

Most upvoted comments

You can do it in a simple way without mod webpack:

import DatatableFactory from ‘vuejs-datatable/dist/vuejs-datatable.esm.js’; Vue.use(DatatableFactory);

That’s all you need))

For me above solution not worked.

// This solution is working for me Vue.use(require(‘vuejs-datatable’)); image

tl;dr

Add this to your webpack.config.js:

module.exports = {
    resolve: {
        alias: {
            'vuejs-datatable': 'vuejs-datatable/dist/vuejs-datatable.esm.js',
        }
    },
}

Long explanation

Pretty much like Vue itself for its full build (see vuejs doc), vuejs-datatable is shipped in 2 different builds (with the PR #47 & v1.7.0): an IIFE and an ESM build. The main difference between those builds is that the IIFE rely on globally exposed variables (Vue in your case), while the other will use node resolution to inject the Vue module. In your case, you need to use the ESM build. But for now, the default file imported when doing a require or import is the IIFE. . . .

But it is still quite odd that adding window.Vue = Vue; did not solved your problem… So you may have another problem. Try to edit your webpack.config.js and keep me in touch.


@pstephan1187 maybe we should replace the index file in the package.json’s main field to vuejs-datatable/dist/vuejs-datatable.esm.js to avoid this configuration requirement.

“vue”: “^2.5.7”, “vuejs-datatable”: “^1.7.0”,

Am having the same error, kindly assist

Yes! that worked. Thank you very much!! Below was my setting, leaving it here, just in case someone else needs it.

in vue.config.js

module.exports = { chainWebpack: config => { config.resolve.alias.set(‘vuejs-datatable’, ‘vuejs-datatable/dist/vuejs-datatable.esm.js’); },

Spent hours to find out the reason of the same error. With vue cli 3, webpack 4.26.0 and vuejs-datatable 1.7.0, I’ve also fixed the “browser” field to “dist/vuejs-datatable.esm.js”.

Hi! I couldn’t reply earlier. I try it today and it works!

Still have this issue with my setup. We are using Vue CLI 3 (so, no webpack.config. it is vue.config.js hence cannot do the above suggested work around), Typescript - so cannot do the import DatatableFactory from …/vuejs.datatable.esm.js file either. Please advise. Thanks!

@GerkinDev I’ll get that change made and pushed up. Thank you