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
- chore: 🤖 Changed module file, moved index, adapted rollup conf Change the default module file to the ESM module. Related to #50, #56. The rollup config has been adaptated too. Moved `index.js` to th... — committed to GerkinDev/vuejs-datatable by deleted user 5 years ago
- chore: 🤖 Changed module file, moved index, adapted rollup conf Change the default module file to the ESM module. Related to #50, #56. The rollup config has been adaptated too. Moved `index.js` to th... — committed to GerkinDev/vuejs-datatable by deleted user 5 years ago
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’));
tl;dr
Add this to your
webpack.config.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 arequire
orimport
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 yourwebpack.config.js
and keep me in touch.@pstephan1187 maybe we should replace the index file in the
package.json
’smain
field tovuejs-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