Error "Cannot read property 'use' of undefined"

[franciscohanna92]

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?

[GerkinDev]

Hi,

Can you tell me more about your build tools? Are you using webpack? If so, could you please post your webpack.config.js file?

Cheers!

[Ashley-dee2]

Am having the same error, kindly assist

[GerkinDev]

I'ld be glad to help, but there's just not enough information~s~ for me to understand the problem.

1. Are you using webpack to bundle your code or are you using the <script src=".../vuejs-datatable.js"/> format?
2. If using webpack, please provide your webpack.config.js file
3. What is your version of Vue & vuejs-datatable?

[Ashley-dee2]

"vue": "^2.5.7", "vuejs-datatable": "^1.7.0",

[GerkinDev]

@Ashley-dee2

1. Thanks
2. Thanks

[franciscohanna92]

@GerkinDev My setup is:

vue ^2.5.17
webpack ^4.19.0
vuejs-datatable ^1.7.0

This is my webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const { VueLoaderPlugin } = require('vue-loader');

const resolve = relativePath => path.resolve(__dirname, '..', relativePath);

module.exports = {
    mode: 'development',
    entry: {
        vue: 'vue',
        index: resolve('src/main.js'),
    },
    output: {
        filename: 'bundle.min.js',
        path: resolve('dist'),
    },
    module: {
        rules: [
            {
                test: /.(ttf|woff2|woff|eot|jpg|jpeg|png|svg)$/,
                use: ['file-loader'],
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        css: ['vue-style-loader', {
                            loader: 'css-loader',
                        }],
                        'scss': 'vue-style-loader!css-loader!sass-loader',
                        'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
                        js: [
                            'babel-loader',
                        ],
                    },
                    cacheBusting: true,
                },
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [
                    resolve('src'),
                    resolve('node_modules/webpack-dev-server/client'),
                ],
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }]
            }
        ],
    },
    devtool: 'eval',
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new VueLoaderPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jquery: 'jquery',
            'window.jQuery': 'jquery',
            jQuery: 'jquery'
        })
    ],
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
        },
        extensions: ['*', '.vue', '.js', '.json'],
    },
    performance: {
        hints: false,
    },
};

[GerkinDev]

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.

[GerkinDev]

Hey there, any news on this? Is the problem solved?

@franciscohanna92

[franciscohanna92]

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

[pstephan1187]

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

[ravindrasinghinbox]

For me above solution not worked.

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

[mcmimik]

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".

[idhowardgj94]

For me above solution not worked.

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

it's work for me, with laravel and laravel mix. thanks.

[usmankah]

Hi, I am having similar issue.

I have Vue 3.1.3 installed with webpack. In a new project, i tried using DataTable by installing using: npm install vuejs-datatable

Everything is working ok before adding DataTable, My Main.js is given below, please guide what to do?

import 'bootstrap/dist/css/bootstrap.min.css' import BootstrapVue from 'bootstrap-vue' import VueResource from 'vue-resource' import Vue from 'vue' import DatatableFactory from "vuejs-datatable" import App from './App.vue' import { store } from './store/store'

Vue.use(VueResource); Vue.use(BootstrapVue); Vue.use(require('vuejs-datatable'));

//Vue.http.headers.common['Access-Control-Allow-Origin'] = 'true';

Vue.config.productionTip = false;

window.Vue = Vue;

new Vue({ store, render: h => h(App), }).$mount('#app')

===================================== I am getting:

[HMR] Waiting for update signal from WDS... log.js:24:4 You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html vue.runtime.esm.js:8021 TypeError: window.Vue is undefined[Learn More]

[GerkinDev]

Hi @usmankah

Can you please post your stack trace with files? Btw please format your comment properly using Markdown syntax, it is much simpler to read.

Thank you

[usmankah]

1. Package-Lock.json contains:

"vuejs-datatable": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/vuejs-datatable/-/vuejs-datatable-1.7.0.tgz", "integrity": "sha512-gsK6gVJ11GP4X1/XyomKXpfsunQetL6Un9XNkJ0YQIrbAZAT5F4DnCKNf+kPrxZNOpLb5pW0NctVFbEEiD9hqQ==", "requires": { "object-path": "0.11.4", "vue": "2.5.17" } }

2. Package.json contains: "dependencies": { "bootstrap": "^4.1.3", "bootstrap-vue": "^2.0.0-rc.11", "jquery": "^3.3.1", "npm": "^6.4.1", "object-path": "^0.11.4", "popper.js": "^1.14.5", "vue": "^2.5.17", "vue-resource": "^1.5.1", "vuejs-datatable": "^1.7.0", "vuejs-datepicker": "^1.5.4", "vuex": "^3.0.1" }

3. StackTrace:

`TypeError: window.Vue is undefined[Learn More] app.js line 4091 > eval:1:17262

vuejs-datatable.js:1 vuejs-datatable.js:1 vuejs-datatable.js:1 ./node_modules/vuejs-datatable/dist/vuejs-datatable.js http://localhost:8080/app.js:4091:1 __webpack_require__ http://localhost:8080/app.js:725:12 fn http://localhost:8080/app.js:102:20 webpack-internal:///./src/main.js:13:73 ./src/main.js http://localhost:8080/app.js:4456:1 __webpack_require__ http://localhost:8080/app.js:725:12 fn http://localhost:8080/app.js:102:20 0 http://localhost:8080/app.js:4481:18 __webpack_require__ http://localhost:8080/app.js:725:12 http://localhost:8080/app.js:792:18 http://localhost:8080/app.js:1:11 `

[sobiero]

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.

Above solution works for me

[SerGioPicconti]

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))

[Gamezxz]

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))

Thank you !!

[shivanaru]

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]

@shivanaru As described in vuejs/vue-cli#2398, you can still alias modules in the vue.config.js file, and the syntax is exactly as above. The goal of vue-cli is to be a configurable webpack preset, so you should be able to do what you want with the underlying webpack.

[shivanaru]

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'); },

[choyan]

@SerGioPicconti Thanks a lot!

[bilal-rizwaan]

**

> How can i Solve this issue

** Uncaught TypeError: Cannot read property 'use' of undefined at eval (index.js?a18c:8) at Module../src/router/index.js (app.js:1508) at webpack_require (app.js:849) at fn (app.js:151) at eval (main.js:13) at Module../src/main.js (app.js:1496) at webpack_require (app.js:849) at fn (app.js:151) at Object.1 (app.js:1521) at __webpack_require__ (app.js:849)