Vueify + Elixir + Hotloading - Uncaught TypeError: Cannot read property 'indexOf' of undefined

Question

I've set up Elixir to use Vueify with hot reload plugin. Everything compiles ok but I get a console error on my compiled file and the Vue component doesn't appear to be transforming to html, it still shows the <app></app> tags. If I remove the hot reload plugin from elixir, the page renders fine.

The error is:

Uncaught TypeError: Cannot read property 'indexOf' of undefined

The console output it

[HMR] Attempting websocket connection to http://localhost:3123
app.js:10904 Uncaught TypeError: Cannot read property 'indexOf' of undefined
[vue-devtools] Ready. Detected Vue v1.0.26
[HMR] Websocket connection successful.
[HMR] Updated modules ["resources/assets/js/embeds/html/app.vue"]

So it's worth mentioning that it is receiving messages from hot reloading, it just doesn't render the page because of this error. The error is happening on the following lines in the compiled app.js file.

// compat with < 2.0.0-alpha.7
  if (Vue.config._lifecycleHooks.indexOf('init') > -1) {
    initHookName = 'init'
  }

Here are my files

gulpfile.js

var elixir = require('laravel-elixir');
var gutil = require('gulp-util');
require('laravel-elixir-vueify');

if (gutil.env._.indexOf('watch') > -1) {
    //  Add the browserify HMR plugin
    elixir.config.js.browserify.plugins.push({
        name: 'browserify-hmr',
        options: {}
    })
}

elixir(function (mix) {
    mix.browserify('embeds/html/main.js', 'public/js/embeds/html/app.js');
});

main.js

var Vue = require('vue')
var App = require('./app.vue')

new Vue({
    el: 'body',
    components: {
        app: App
    },
    created: function() {
        console.log('test');
    }
})

app.vue

<style>

</style>

<template>
    <div id="player-wrapper">
        {{ msg }}
    </div>
</template>


<script>
    export default {
        data () {
            return {
                msg: 'Hello world!'
            }
        }
    }
</script>

index.blade.php

<body>
    <app></app>
    <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</body>

KDKaergaard · Accepted Answer · 2016-07-05 08:39:19Z

8

It might be a version compatibility problem, between Vue, and Vue-hot-reload-api.

As an example, [email protected] currently depends on [email protected], which only seems to be compatible with [email protected].

From personal experience, this specific error occurred to me, when using [email protected] with [email protected], although i have not tested it the other way around.

A note a the very top of Vue-hot-reload-api's Github readme, also seems to verify this problem.

In my case, i just reinstalled the [email protected] version of vue-hot-reload-api, as following:

npm install --save-dev vue-hot-reload-api@^1.3.2

So have a look at the versions of your dependencies.

edited Jul 5, 2016 at 8:39

answered Jul 5, 2016 at 8:22

KDKaergaard

963 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wasim Over a year ago

Thanks a lot. I downgraded to [email protected] and it worked.

Olenka Over a year ago

Thanks, older vue-hot-reload-api worked for me as well!

Collectives™ on Stack Overflow

Vueify + Elixir + Hotloading - Uncaught TypeError: Cannot read property 'indexOf' of undefined

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related