Error "Cannot read property 'use' of undefined" #50

franciscohanna92 · 2018-10-11T05:06:10Z

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?

The text was updated successfully, but these errors were encountered:

GerkinDev · 2018-10-11T05:44:58Z

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 · 2018-10-11T08:49:00Z

Am having the same error, kindly assist

GerkinDev · 2018-10-11T08:54:23Z

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

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

Ashley-dee2 · 2018-10-11T09:01:36Z

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

GerkinDev · 2018-10-11T09:12:17Z

@Ashley-dee2

Thanks
Thanks

franciscohanna92 · 2018-10-11T14:47:12Z

@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 · 2018-10-11T15:38:30Z

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 · 2018-10-15T09:55:15Z

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

@franciscohanna92

franciscohanna92 · 2018-10-15T15:12:20Z

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

pstephan1187 · 2018-10-15T17:07:46Z

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

ravindrasinghinbox · 2018-12-05T15:10:58Z

For me above solution not worked.

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

mcmimik · 2018-12-07T13:08:35Z

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 · 2018-12-22T03:21:06Z

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 · 2019-01-05T07:53:18Z

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 · 2019-01-09T19:14:35Z

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 · 2019-01-10T07:16:04Z

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

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" }
StackTrace:

TypeError: window.Vue is undefined[Learn More] app.js line 4091 > eval:1:17262 <anonymous> vuejs-datatable.js:1 <anonymous> vuejs-datatable.js:1 <anonymous> 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 <anonymous> 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 <anonymous> http://localhost:8080/app.js:792:18 <anonymous> http://localhost:8080/app.js:1:11

sobiero · 2019-01-23T07:12:44Z

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 · 2019-01-24T06:22:58Z

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

Change the default module file to the ESM module. Related to #50, #56. The rollup config has been adaptated too. Moved `index.js` to the `src` subfolder. Issues: #50, #56

Gamezxz · 2019-03-02T08:45:26Z

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 · 2019-05-02T20:01:24Z

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 · 2019-05-03T08:01:46Z

@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 · 2019-05-03T17:43:13Z

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 · 2019-09-07T19:01:38Z

@SerGioPicconti Thanks a lot!

bilal-rizwaan · 2021-02-18T07:39:42Z

**

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

franciscohanna92 closed this as completed Oct 15, 2018

GerkinDev mentioned this issue Oct 26, 2018

Cannot read property 'use' of undefined #56

Closed

keithbrinks mentioned this issue Jan 8, 2019

IE11: SCRIPT1003: Expected ':' #60

Closed

GerkinDev added the Enhancement A new feature to add to a next release label Feb 15, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error "Cannot read property 'use' of undefined" #50

Error "Cannot read property 'use' of undefined" #50

franciscohanna92 commented Oct 11, 2018

GerkinDev commented Oct 11, 2018

Ashley-dee2 commented Oct 11, 2018

GerkinDev commented Oct 11, 2018 •

edited

Loading

Ashley-dee2 commented Oct 11, 2018

GerkinDev commented Oct 11, 2018

franciscohanna92 commented Oct 11, 2018

GerkinDev commented Oct 11, 2018 •

edited

Loading

GerkinDev commented Oct 15, 2018

franciscohanna92 commented Oct 15, 2018

pstephan1187 commented Oct 15, 2018

ravindrasinghinbox commented Dec 5, 2018 •

edited

Loading

mcmimik commented Dec 7, 2018

idhowardgj94 commented Dec 22, 2018

usmankah commented Jan 5, 2019 •

edited

Loading

GerkinDev commented Jan 9, 2019

usmankah commented Jan 10, 2019

sobiero commented Jan 23, 2019

tl;dr

Long explanation

SerGioPicconti commented Jan 24, 2019

Gamezxz commented Mar 2, 2019

shivanaru commented May 2, 2019

GerkinDev commented May 3, 2019

shivanaru commented May 3, 2019

choyan commented Sep 7, 2019

bilal-rizwaan commented Feb 18, 2021

Error "Cannot read property 'use' of undefined" #50

Error "Cannot read property 'use' of undefined" #50

Comments

franciscohanna92 commented Oct 11, 2018

GerkinDev commented Oct 11, 2018

Ashley-dee2 commented Oct 11, 2018

GerkinDev commented Oct 11, 2018 • edited Loading

Ashley-dee2 commented Oct 11, 2018

GerkinDev commented Oct 11, 2018

franciscohanna92 commented Oct 11, 2018

GerkinDev commented Oct 11, 2018 • edited Loading

tl;dr

Long explanation

GerkinDev commented Oct 15, 2018

franciscohanna92 commented Oct 15, 2018

pstephan1187 commented Oct 15, 2018

ravindrasinghinbox commented Dec 5, 2018 • edited Loading

mcmimik commented Dec 7, 2018

idhowardgj94 commented Dec 22, 2018

usmankah commented Jan 5, 2019 • edited Loading

GerkinDev commented Jan 9, 2019

usmankah commented Jan 10, 2019

sobiero commented Jan 23, 2019

tl;dr

Long explanation

SerGioPicconti commented Jan 24, 2019

Gamezxz commented Mar 2, 2019

shivanaru commented May 2, 2019

GerkinDev commented May 3, 2019

shivanaru commented May 3, 2019

choyan commented Sep 7, 2019

bilal-rizwaan commented Feb 18, 2021

> How can i Solve this issue

GerkinDev commented Oct 11, 2018 •

edited

Loading

GerkinDev commented Oct 11, 2018 •

edited

Loading

ravindrasinghinbox commented Dec 5, 2018 •

edited

Loading

usmankah commented Jan 5, 2019 •

edited

Loading