admin管理员组文章数量:1414605
I've set up Elixir to use Vueify with hot reload plugin. Everything piles ok but I get a console error on my piled file and the Vue ponent 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 piled app.js file.
// pat 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',
ponents: {
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>
I've set up Elixir to use Vueify with hot reload plugin. Everything piles ok but I get a console error on my piled file and the Vue ponent 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 piled app.js file.
// pat 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',
ponents: {
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>
1 Answer
Reset to default 8It might be a version patibility problem, between Vue, and Vue-hot-reload-api.
As an example, [email protected] currently depends on [email protected], which only seems to be patible 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.
本文标签：
版权声明：本文标题：javascript - Vueify + Elixir + Hotloading - Uncaught TypeError: Cannot read property 'indexOf' of undefined - St 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745195048a2647095.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论