DEV Community

Dimitri Hilverda
Dimitri Hilverda

Posted on

Strange build behavior vue3

Hello,

My name is Dimmy, this is my first post here, hope trhat someone can help me out.

I am using vite with vue for almost 2 years now, and all goes well most of the times, but this one gives me a headache.

I have a piece of code that works fine when using vite with hot reload, but fails when using vite build

the snippet part is:

 mounted(){
                    documentStore.$subscribe(async (mutation, state) => {
                        // only update Template when oldValue is not newValue and tha Values are not an Object
                        if ((!isObject(mutation.events.oldValue) && !isObject(mutation.events.newValue))) {
                            if (mutation.events.oldValue !== mutation.events.newValue) {
                                documentStore.updateTemplate()
                            }
                        }
                    })

                    document.getElementById('lottie-loader').style.display = "none";

                    this.checkReaderMode();

                    Object.entries(documentStore.documents[documentStore.currentVersion].json).forEach( (page) => {
                        const [key, val] = page;
                        if( documentStore.documents[documentStore.currentVersion].json[key].hasOwnProperty('settings') ) {
                            if (documentStore.documents[documentStore.currentVersion].json[key].settings.hidden) {
                                document.querySelector('#page_' + key).style.display = "none";
                            }
                        }
                    });
                },
Enter fullscreen mode Exit fullscreen mode

but it compiles to this:

 mounted() {
                    bt.$subscribe(async (de, Sn) => {
                        !ID.isObject(de.events.oldValue) && !ID.isObject(de.events.newValue) && de.events.oldValue !== de.events.newValue && await bt.updateTemplate()
                    }
                    ),
                    document.getElementById("lottie-loader").style.display = "none",
                    this.checkReaderMode(),
                    Object.entries(bt.documents[bt.currentVersion].json).forEach(de => {
                        const [Sn,st] = de;
                        bt.documents[bt.currentVersion].json[Sn].hasOwnProperty("settings") && bt.documents[bt.currentVersion].json[Sn].settings.hidden && (document.querySelector("#page_" + Sn).style.display = "none")
                    }
                    )
                },
Enter fullscreen mode Exit fullscreen mode

As you can see it does not makes sense (at least not to me) especially this part: && await bt.updateTemplate() why is that added to the if statement?

It now gives me an error:

caught (in promise) TypeError: Cannot read properties of undefined (reading 'oldValue')
Enter fullscreen mode Exit fullscreen mode

What am I doing wrong?

Especially strange, that it all works fine when i use vite --host --profile --open

Hope that someone sees my mistake and can help me.

Top comments (0)