Invalid string length RangeError in Vue only certain enviroments

admin

Administrator
Staff member
I have a Vue component in production and a testing environment. In production its within a wordpress theme and I get the error:

Code:
jquery.min.js:2 Uncaught RangeError: Invalid string length
    at repeat$1 (vue.js:11398)
    at generateCodeFrame (vue.js:11380)
    at vue.js:11467
    at Array.forEach (<anonymous>)
    at compileToFunctions (vue.js:11464)
    at Vue.$mount (vue.js:11688)
    at Vue._init (vue.js:4901)
    at new Vue (vue.js:4967)
    at HTMLDocument.<anonymous> ((index):234)
    at l (jquery.min.js:2)

In testing I just am using a stand alone file and I get not error and the component works fine. I assume there is something different within the Wordpress and Server that causes the error.

From what I read its just a long string that causes the error but how do you fix it if you cant repeat the error locally? Is there any common "Got Ya's" with Wordpress?

The component itself is very straight forward:

Code:
 <div v-for="event in events" style="    margin: 10px;" v-if="events">
                                <button class="accordion" @click="show">
                                    <a :href="event.url"> Buy Now </a>
                                    <p v-text="event.name.text"></p>
                                    <span class="date">{{ event.start.local | date }}</span>
                                    <span class="capacity" v-if="event.capacity"> Capacity: <span v-text="event.capacity"></span></span>

                                </button>

                                <div class="panel">
                                  <div class="accordian-body" v-html="event.description.html"></div>
                                  <a :href="event.url" class="buy-bottom"> Buy Now </a>
                                </div>

                            </div>

Code:
    jQuery(document).ready(function($) {

                    // Using a basic set of effect
                    var vm = new Vue({
                        el: '#main',
                        data: {

                                events: <?php echo json_encode($another); ?>, 
                        },

                        filters: {
                            date: function (value) {
                                return moment(value).format("dddd, MMM Do");   
                            }
                        },
                        mounted: function () {

                            console.log(this.events)
                            this.$nextTick(function () {
                                // code that assumes this.$el is in-document


                                var acc = document.getElementsByClassName("accordion");
                                var i;

                                for (i = 0; i < acc.length; i++) {
                                    acc[i].onclick = function(){
                                        this.classList.toggle("active");
                                        this.nextElementSibling.classList.toggle("show");
                                    }
                                }
                            })
                        },
                        methods:{
                            show: function(event){

                                var clickedElement = event.target;
                                $(clickedElement).siblings('panel').toggle("show");
                            }
                        }
                    })

                })