Vueify + Elixir + Hotloading - Uncaught TypeError: Kann die Eigenschaft 'indexOf' von undefined nicht lesen

Ich habe Elixir eingerichtet, um Vueify mit dem Hot Reload Plugin zu verwenden. Alles kompiliert ok, aber ich bekomme einen Konsolenfehler in meiner kompilierten Datei und die Vue-Komponente scheint nicht in HTML umgewandelt zu werden, es zeigt immer noch die <app></app> Tags an. Wenn ich das Hot-Reload-Plugin von Elixir entferne, wird die Seite gerendert.Vueify + Elixir + Hotloading - Uncaught TypeError: Kann die Eigenschaft 'indexOf' von undefined nicht lesen

Der Fehler ist:

Uncaught TypeError: Cannot read property 'indexOf' of undefined

Die Konsolenausgabe es

[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 ist es wert zu erwähnen, dass es Nachrichten von heißem Nachladen empfängt, es nicht macht nur die Seite nicht, weil von diesem Fehler. Der Fehler tritt in den folgenden Zeilen in der kompilierten Datei app.js auf.

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

Hier sind meine Dateien

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>

Quelle

2016-07-01 Wasim

Es könnte eine Version Kompatibilitätsproblem zwischen Vue und Vue-Hot-Reload-api sein.

Als Beispiel hängt [email protected] momentan von [email protected] ab, das nur mit [email protected] kompatibel zu sein scheint.

Aus eigener Erfahrung ist dieser spezifische Fehler bei der Verwendung von [email protected] mit [email protected] aufgetreten, obwohl ich es nicht anders herum getestet habe.

Ein Hinweis ein ganz oben Vue-hot-reload-api's Github readme, scheint auch dieses Problem zu überprüfen.

In meinem Fall, ich neu installiert nur die [email protected] Version von vue-Hot-Reload-api, wie folgend:

npm install --save-dev [email protected]^1.3.2

So bei den Versionen Ihrer Abhängigkeiten einen Blick.

Quelle

2016-07-05 08:22:26 Kristian

Vielen Dank. Ich habe auf [email protected] heruntergestuft und es hat funktioniert. – Wasim

Danke, ältere vue-hot-reload-api hat auch für mich funktioniert! – Olenka

Vueify + Elixir + Hotloading - Uncaught TypeError: Kann die Eigenschaft 'indexOf' von undefined nicht lesen

Antwort

Verwandte Themen