Nuxt•6mo ago

javascript added using useHead is being executed on the server

I have a javascript to be executed on the client to check the browser version and also if some functionalities are available and if not match the criteria we redirect the user to a dedicated page (informing the user that he needs to update the browser) But I see that the code added to the script tag is being executed on the server and being changed original:

if (typeof window !== 'undefined') {
 ...
}

if (typeof window !== 'undefined') {
 ...
}

then turns into:

if ("undefined" !== 'undefined') {
 ...
}

if ("undefined" !== 'undefined') {
 ...
}

How can I prevent/fix this? Thanks

16 Replies

Unknown User•6mo ago

Message Not Public

Victor Neves•6mo ago

thanks @Igor Jacaúna I'll gonna take a look and see if it feets on my needs even so, I'm trying to understand why the js code inside the script tag that is injected into the markup is being executed on the server and also changed It's something that I wasn't expecting to happen as it should "just" inject it into the markup

Unknown User•6mo ago

Message Not Public

Victor Neves•6mo ago

I am not sure if it has to do with the way I'm declaring the js function I'm creating it as a "string"

const browserCheck = `(function(){
    function addBodyClass() {
        document.body.className += ' legacy';
        document.removeEventListener("DOMContentLoaded", addBodyClass);
    }

    if (typeof window !== 'undefined') {
        var customProps = true, cssGrid = true, proms = true;
     // rest of the code
    }
})();
`;

useHead({
    script: [browserCheck],
});

const browserCheck = `(function(){
    function addBodyClass() {
        document.body.className += ' legacy';
        document.removeEventListener("DOMContentLoaded", addBodyClass);
    }

    if (typeof window !== 'undefined') {
        var customProps = true, cssGrid = true, proms = true;
     // rest of the code
    }
})();
`;

useHead({
    script: [browserCheck],
});

Unknown User•6mo ago

Message Not Public

Victor Neves•6mo ago

the code is inside app.vue

Unknown User•6mo ago

Message Not Public

Victor Neves•6mo ago

it's hard as it's the config is very complex The addBodyClass function is called inside the if (typeof window !== 'undefined') { base on other conditions

if (!(customProps && cssGrid && proms) || isOnBlacklist) {
    var currentLocation = document.location;
    var url;

    if (typeof currentLocation === 'string') {
        url = currentLocation;
    } else if (typeof currentLocation === 'object') {
        url = currentLocation.href;
    }

    if (!/update-browser/gi.test(url)) {
        document.location = '/update-browser';
    }

    if (document.readyState === 'loading') {
        document.addEventListener("DOMContentLoaded", addBodyClass);
    } else {
        addBodyClass();
    }
}

if (!(customProps && cssGrid && proms) || isOnBlacklist) {
    var currentLocation = document.location;
    var url;

    if (typeof currentLocation === 'string') {
        url = currentLocation;
    } else if (typeof currentLocation === 'object') {
        url = currentLocation.href;
    }

    if (!/update-browser/gi.test(url)) {
        document.location = '/update-browser';
    }

    if (document.readyState === 'loading') {
        document.addEventListener("DOMContentLoaded", addBodyClass);
    } else {
        addBodyClass();
    }
}

Unknown User•6mo ago

Message Not Public

Victor Neves•6mo ago

https://stackblitz.com/edit/nuxt-starter-bdvgi1?file=pages%2Fupdate-browser.vue,pages%2Findex.vue,app.vue

StackBlitz

Nuxt - Starter (forked) - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

Victor Neves•6mo ago

No problem now I'm confused In my example, I have the same way as I have on the project and also doesn't change the code :/

Unknown User•6mo ago

Message Not Public

Victor Neves•6mo ago

nope. I forgot to set the SSR Now I'm also getting the js code changed

Victor Neves•6mo ago

looks like someone already reported this behavior https://github.com/nuxt/nuxt/issues/22559

GitHub

Unexpected substitutions in embedded scripts in useHead · Issue #22...

Environment Operating System: Linux Node Version: v16.20.0 Nuxt Version: 3.6.5 Nitro Version: 2.5.2 Package Manager: npm@9.4.2 Builder: vite User Config: - Runtime Modules: - Reproduction https://s...

Unknown User•6mo ago

Message Not Public

Gaming

Programming

javascript added using useHead is being executed on the server