Not working with Vue?

[factormaarten]

Hi there,

I'm using aliasify to make vue work in browserify - however it doesn't seem to reply the require.

My package.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "aliasify": "^2.0.0",
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-browserify-official": "^0.1.3",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3"
  },
  "aliasify": {
    "aliases": {
      "vue": "vue/dist/vue.js",
      "underscore": "lodash"
    }
  } 
}

And my 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-sass');

/**
 * 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');
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.set('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'
// });

What am I doing wrong?

[NemoAlex]

I guess you need this:

  "browserify": {
    "transform": [
      "aliasify"
    ]
  },

[wlachenal]

@NemoAlex, you are such a life saver!

[jwalton]

@mpjraaij Does that fix it for you?

[Erichain]

Hello Alex @NemoAlex ,

Still not working with your solution in my code, any other solution to fix this problem ? 🙁

[corwin-of-amber]

Seems to me that aliasify does not rewrite require calls in modules. Is that correct?

[jwalton]

aliasify will not transform require calls in anything in node_modules because browserify doesn't run transforms on node_modules by default. There's a global option that will fix this though: https://github.com/browserify/browserify#btransformtr-opts