Support the ongoing development of →
Installation Configuration Testing
Last updated 2 years ago.

I've found the solution my self. It's because of installing npm with sudo command, we have to install npm modules without sudo. So to fix this issue we should remove npm modules and then run npm install and wait until it install all needed dependecies.

FYI : You bootstrap.js file and package.json file should look like this :

Package.json :

  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "buble": "^0.14.0",
    "buble-loader": "^0.2.1",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-11",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-loader": "^9.7.0",
    "vue-resource": "^1.0.3",
    "webpack": "^2.1.0-beta.22"

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

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

window.Vue = require('vue');

 * 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.set('X-CSRF-TOKEN', Laravel.csrfToken);


Vue.http.options.credentials = true; //very important
 * 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 another tip which is important you should use the latest npm version : 6.9.

Hope others problem solve quickly with this solution.


Sign in to participate in this thread!


Your banner here too?

anonymox anonymox Joined 16 Oct 2016


We'd like to thank these amazing companies for supporting us

Your logo here?

The Laravel portal for problem solving, knowledge sharing and community building.

© 2024 - All rights reserved.