Invalid string length at repeat$1 (VueJS) [Resolved: continue is a reserved JavaScript word]

Question

I'm having the Error in execution of function repeat$1 while compiling a very simple VueJS template. This error prevents the app from compiling.

Can't wrap my head against what's wrong whit the template.

Here's the code: (I replaced parts of the template that consisted solely on text with the word "text".)

<template>
    <div class="container">
        <div class="row">
            <div class="col-lg-10 mx-auto" v-if="showPrivacyDisclaimer">
                <div class="card mt-4">
                    <div class="card-body">
                        <div class="card-title">
                            text
                        </div>

                        <p>
                            <b>text</b>
                        </p>
                        <p>
                            text.
                        </p>
                        <p> 
                            text
                        </p>

                        <div class="text-sm">
                            <a @click="details = true" style="text-decoration: underline">
                                Leer más: ¿Qué datos recopilamos?
                            </a>

                            <p v-if="details">
                                text
                            </p>

                            <br>

                            <a @click="rights = true" style="text-decoration: underline">
                                Leer más:  ¿Cómo ejercer tus derechos sobre estos datos?
                            </a>

                            <p v-if="rights">
                                text
                            </p>
                        </div>

                    </div>
                    <div class="card-footer">
                        <button type="button"
                            class="btn btn-primary"
                            @click="continue()">
                            Aceptar y continuar
                        </button>
                    </div>
                </div>

                <img :src="baseUrl + '/public/img/eks-logo.svg'"
                    class="mt-4" style="max-width: 10rem">

                <p class="text-muted mt-4 text-sm">
                    text
                    <br>
                    more text
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Home',
    data() {
        return {
            baseUrl: process.env.VUE_APP_PHP_BASE_URL,
            showPrivacyDisclaimer: false,
            details: false,
            rights: false,
        }
    },
    mounted()
    {
        let hasPrivacyAccepted = window.localStorage.getItem('pda');
        if (!hasPrivacyAccepted) {
            this.showPrivacyDisclaimer = true;
        } else {
            this.continue();
        }
    },
    methods: {
        continue()
        {
            window.localStorage.setItem('pda', 1);

            this.$router.replace({
                path: '/encuesta/' + this.$route.query.e,
                query: this.$route.query
            })
        }
    }
}
</script>

If I completely remove everything between the <template> tags (except the first div that is required), the app starts compiling again.

I have tried progressively deleting parts of the template that use Vue directives (v-if, etc.). But this didn't made the app compile :(

Please help!

Update: I forgot to mention I've already tried deleting and re-installing node_modules

Update 2: I found the source of the bug. continue is a reserved JS word.

Answer 1

You can't use @click="continue()"

This is a reserved word for javascript.

You can see the full list here :

https://www.w3schools.com/js/js_reserved.asp

Answer 2

Update: I started refactoring the template in two views and a more descriptive error message pop'd-up.

The error was that I was using a JavaScript reserved word as a method name (continue is a reserved word).