Vue报错：Uncaught RangeError: Maximum call stack size exceeded

Question

Vue在页面修改保存后浏览器自动刷新控制台报错：

Uncaught RangeError: Maximum call stack size exceeded
    at hotAddUpdateChunk (bootstrap 27fb73d…:828)
    at webpackHotUpdateCallback (bootstrap 27fb73d…:27)
    at webpackHotUpdateCallback (bootstrap 27fb73d…:28)
    at webpackHotUpdateCallback (bootstrap 27fb73d…:28)
    at webpackHotUpdateCallback (bootstrap 27fb73d…:28)
    at webpackHotUpdateCallback (bootstrap 27fb73d…:28)
    at webpackHotUpdateCallback (bootstrap 27fb73d…:28)
    at webpackHotUpdateCallback (bootstrap 27fb73d…:28)
    at webpackHotUpdateCallback (bootstrap 27fb73d…:28)
    at webpackHotUpdateCallback (bootstrap 27fb73d…:28)

这是什么原因？

App.vue:

<template>
    <div id="app" class="container">
        <nav class="navbar navbar-default">
            <ul class="nav navbar-nav">
                <li>
                    <router-link to="/home">home</router-link>
                </li>
                <li>
                    <router-link to="/message">message center</router-link>
                </li>
            </ul>
            <div class="user-info" v-show="isLogin">
                <label class="username">{{name}}</label>
                <span class="logout" @click="logout">Log out</span>
            </div>
            <div class="actions" v-show="!isLogin">
                <span @click="goLogin">sign in</span>&nbsp;&nbsp;|&nbsp;&nbsp; 
                <span @click="goRegister">sign up</span>
            </div>
        </nav>
        <div class="nav-content">
                <router-view :key="Date.now()"></router-view>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import VueRouter from 'vue-router';
    import service from './services/services';

    Vue.use(VueRouter);
    const router = new VueRouter();

    export default {
        data() {
            return {
                isLogin: false,
                name: localStorage.userName
            };
        },
        methods: {
            logout() {
                service.logout(localStorage.userName)
                    .then(data => {
                        this.isLogin = false;
                        localStorage.isLogin = false;
                        router.push({ path: '/home' });
                    })
                    .catch(err => console.log(err));
            },
            goLogin() {
                router.push({ path: '/login' });
            },
            goRegister() {
                router.push({ path: '/register' })
            }
        },
        watch: {
            $route(newVal, oldVal) {
                this.isLogin = JSON.parse(localStorage.isLogin);
                this.name = localStorage.userName;
            }
        },
        mounted() {
            localStorage.isLogin = localStorage.isLogin ? localStorage.isLogin : false;
            this.isLogin = JSON.parse(localStorage.isLogin);
        }
    }
</script>

main.js

import Vue from 'vue';
import VueRouter from'vue-router';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

import App from './App';
import routerConfig from './routes/router.config';

Vue.use(VueRouter);
const router = new VueRouter({
    routes: routerConfig.routes
});

new Vue({
    el: '#app',
    router,
    render: h=>h(App)
});

Answer 1

https://segmentfault.com/q/10...

看看这个问题里我的答案

检查一下你起webpack-dev-server的方式和你的webpack.config.js

Answer 2

补充答案:
我是页面调用自定义组件时报这个错误，后来把引入的组件名字改了下，错误消失

Answer 3

解决了吗？我也有这个问题

Answer 4

楼主你解决了吗？ 我提出公用模块common，vendor打包生产后，必须在cil加入--hot才能自动刷新，且css编译会报出Maximum call stack size exceeded！ 如果只打包一个文件就不会出错，cil也不用加--hot