javascript - Updating Vue gives an error window.Vue.use is not a function - Stack Overflow

admin管理员组

文章数量:1416073

After updating Vue from v1.0.26 to v2.4.4 I got an error:

window.Vue.use is not a function

This is are my entry js bootstrap.js:

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

//window.$ = window.jQuery = require('jquery');
require('bootstrap');

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable ponents. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */

window.Vue = require('vue');
require('vue-resource');

/**
 * We'll register a HTTP interceptor to attach the "CSRF" header to each of
 * the outgoing requests issued by this application. The CSRF middleware
 * included with Laravel will automatically verify the header's value.
 */

Vue.http.interceptors.push((request, next) => {
    request.headers['X-CSRF-TOKEN'] = Laravel.csrfToken;

    next();
});

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from "laravel-echo"

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });

And app.js:

/**
 * First we will load all of this project's JavaScript dependencies which
 * include Vue and Vue Resource. This gives a great starting point for
 * building robust, powerful web applications using Vue and Laravel.
 */
require('./bootstrap');
require('./slider');
require('./search-form');
require('./scroll-spy');
require('./smooth-scroll');
require('./autoplete');

var VueResource = require('vue-resource');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the body of the page. From here, you may begin adding ponents to
 * the application, or feel free to tweak this setup for your needs.
 */

Vueponent('video-player', require('./ponents/VideoPlayer.vue'));
Vueponent('videos', require('./ponents/Videos.vue'));
Vueponent('single-video', require('./ponents/Video.vue'));
Vueponent('players', require('./ponents/Players.vue'));
Vueponent('pages', require('./ponents/Pages.vue'));
Vueponent('videos-counter', require('./ponents/VideosCounter.vue'));
Vueponent('players-counter', require('./ponents/PlayersCounter.vue'));

Vueponent('player', require('./ponents/Player.vue'));
Vueponent('player-card', require('./ponents/PlayerCard.vue'));
Vueponent('player-info', require('./ponents/PlayerInfo.vue'));
Vueponent('player-stats', require('./ponents/PlayerStats.vue'));
Vueponent('player-videos', require('./ponents/PlayerVideos.vue'));
Vueponent('masked-input', require('./ponents/MaskedInput.vue'));

Vue.use(VueResource);

const app = new Vue({
    el: 'body',
    data: window.videoApp
});

I have tried to search around, but couldn't find anything about, how can I fix this?

This is the webpack.config.js:

{
    module: {
        noParse: [
            /node_modules[\\/]video\.js/
        ]
    }
}

And I run gulpfile for building tasks:

const elixir = require('laravel-elixir');

require('laravel-elixir-vue');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are piling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(mix => {
    mix.copy('resources/assets/js', 'public/js');
    //mix.copy('resources/assets/css', 'public/css');

    mix.sass('app.scss')
       .sass('admin.scss', 'public/css/admin.css')
       .sass('new-app.scss', 'public/css/new-app.css')
       .webpack('app.js')
       .webpack('admin.js')
});

After updating Vue from v1.0.26 to v2.4.4 I got an error:

window.Vue.use is not a function

This is are my entry js bootstrap.js:

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

//window.$ = window.jQuery = require('jquery');
require('bootstrap');

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable ponents. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */

window.Vue = require('vue');
require('vue-resource');

/**
 * We'll register a HTTP interceptor to attach the "CSRF" header to each of
 * the outgoing requests issued by this application. The CSRF middleware
 * included with Laravel will automatically verify the header's value.
 */

Vue.http.interceptors.push((request, next) => {
    request.headers['X-CSRF-TOKEN'] = Laravel.csrfToken;

    next();
});

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from "laravel-echo"

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });

And app.js:

/**
 * First we will load all of this project's JavaScript dependencies which
 * include Vue and Vue Resource. This gives a great starting point for
 * building robust, powerful web applications using Vue and Laravel.
 */
require('./bootstrap');
require('./slider');
require('./search-form');
require('./scroll-spy');
require('./smooth-scroll');
require('./autoplete');

var VueResource = require('vue-resource');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the body of the page. From here, you may begin adding ponents to
 * the application, or feel free to tweak this setup for your needs.
 */

Vue.ponent('video-player', require('./ponents/VideoPlayer.vue'));
Vue.ponent('videos', require('./ponents/Videos.vue'));
Vue.ponent('single-video', require('./ponents/Video.vue'));
Vue.ponent('players', require('./ponents/Players.vue'));
Vue.ponent('pages', require('./ponents/Pages.vue'));
Vue.ponent('videos-counter', require('./ponents/VideosCounter.vue'));
Vue.ponent('players-counter', require('./ponents/PlayersCounter.vue'));

Vue.ponent('player', require('./ponents/Player.vue'));
Vue.ponent('player-card', require('./ponents/PlayerCard.vue'));
Vue.ponent('player-info', require('./ponents/PlayerInfo.vue'));
Vue.ponent('player-stats', require('./ponents/PlayerStats.vue'));
Vue.ponent('player-videos', require('./ponents/PlayerVideos.vue'));
Vue.ponent('masked-input', require('./ponents/MaskedInput.vue'));

Vue.use(VueResource);

const app = new Vue({
    el: 'body',
    data: window.videoApp
});

I have tried to search around, but couldn't find anything about, how can I fix this?

This is the webpack.config.js:

{
    module: {
        noParse: [
            /node_modules[\\/]video\.js/
        ]
    }
}

And I run gulpfile for building tasks:

const elixir = require('laravel-elixir');

require('laravel-elixir-vue');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are piling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(mix => {
    mix.copy('resources/assets/js', 'public/js');
    //mix.copy('resources/assets/css', 'public/css');

    mix.sass('app.scss')
       .sass('admin.scss', 'public/css/admin.css')
       .sass('new-app.scss', 'public/css/new-app.css')
       .webpack('app.js')
       .webpack('admin.js')
});

• javascript
• vuejs2

Share Improve this question Follow edited Sep 28, 2017 at 6:04 Leff asked Sep 27, 2017 at 22:40 LeffLeff 1,4403131 gold badges111111 silver badges226226 bronze badges 3

• what does console.log(window.Vue) print out? – thanksd Commented Sep 27, 2017 at 23:08
• Do you use webpack? Can you add its config? – Quoc-Anh Nguyen Commented Sep 28, 2017 at 1:50
• I have added the config to the question – Leff Commented Sep 28, 2017 at 6:05

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Try this config for webpack.config.js.

resolve: {
  alias: {
    vue: 'vue/dist/vue.js'
  }
}

https://github./vuejs-templates/webpack/issues/215#issuement-238095102

(Thanks for @yyx990803!)

Or... what is the result of console.log(Vue) ?

I think it will be {default: function Vue()...} (You can change way to import Vue library, or adding .default But this workaround won't work).

本文标签： javascriptUpdating Vue gives an error windowVueuse is not a functionStack Overflow