CODEWITHSUNDEEP
javascriptvue.jsprehydration
prav
prav

Reputation: 33

Hydration completed but contains mismatches - Ascii art in a vue component

I have an ascii art that is displayed in the {{ name }} of the component. During development, I got a vue warn:

Hydration text content mismatch in <pre>

And an error:

Hydration completed but contains mismatches. in runtime-core.esm-bundler.js:4525:14

During build, I get this error:

Hydration completed but contains mismatches.

The error is found in dist/assets/index.js

<template>
            <div class="ascii">
                <pre id="ascii-art">{{ name }}</pre>
            </div>
    </template>
        
    <script>
    export default {
        name: "Header",
        components: {
            Prompt
        },
    
    data() {
                try {
                    return {
                        name: // ascii art
                    };
                } catch (error) {
                    // Handle the error
                    console.error("Error occurred while initializing 'name':", error);
                    return {
                        name: 'Error occurred while initializing name property',
                    };
                }
            }
    }
    </script>

I have tried putting it in a try catch block and console.log the error but it is not working

Upvotes: 0

Views: 2179

Answers (1)

pedogunu
pedogunu

Reputation: 61

hydration needs no difference between result HTML that client rendered and result HTML that server rendered. So you needed to render DOM(ascii art string) at mounted cycle not created cycle like below.

<template>
            <div class="ascii">
                <pre id="ascii-art">{{ name }}</pre>
            </div>
    </template>
        
    <script>
    export default {
        name: "Header",
        components: {
            Prompt
        },
    
    data() {
                return {
                        name: 'Error occurred while initializing name property',
                    };
            },
    mounted() {
        try {
            this.name = 'ascii art';
        }
    },
    }
    </script>

Upvotes: 0

Related Questions