Vite won't let JavaScript to work properly

@Sinnbeck @vite is in the head

@vite(['resources/js/template.js',])

and inside template.js I have this:

(function () {
	("use strict");
	var navbarMenuHTML = document.querySelector(".navbar-menu").innerHTML;
})();

And I have element with class nav-menu

@Armani Arent you calling it?

(function () {
	("use strict");
	var navbarMenuHTML = document.querySelector(".navbar-menu").innerHTML;
})() //call it?

If you call document.querySelector(".navbar-menu").innerHTML; in the browser console, it works ?

@Sinnbeck Yes it works in the console, sure I call it

@Armani Does it make a difference if you move the @vite to the bottom of body?

@Sinnbeck No difference. I can't work with Vuejs because of this problem.

@Armani How about

(function () {
	("use strict");
    setTimeout(() => {
        var navbarMenuHTML = document.querySelector(".navbar-menu").innerHTML;
    }, 0)
	
})()

@Sinnbeck Yes it works like that and I tried before, I want to know why it needs delay.

@Armani And the class is coming from a blade file and not vue right? I am struggling to recreate the issue.

Be aware that if its added in vue, it is probably because your helper file is loaded first

@Sinnbeck It is a Inertia/Vue project so everything is in Vue files

@Armani Ok. Then it is most likely due to vue is loaded after your helper.js file is.

@Sinnbeck What is the best solution?

@Armani Hard to say when I dont know your code. I cannot think of any reason you would need to use a query selector when using inertia/vue. Why not just have the logic directly in vue?

@Sinnbeck This file is needed for template functionality and some JavaScript plugins, it's a Bootstrap Template

@Armani Then I dont see any way of doing it without the setTimeout. Maybe vue has a hook for when the page is full rendered you can use and load the file there?

@Sinnbeck Yes it has mounted() hook, I will try that, Thanks

@Armani I got this working in react. I assume it works in vue as well

  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
    import('./helper.js') //here
  },

@Sinnbeck It gives me this error in console:

unreachable code after return statement

@Armani Oh there is a return? Can you show yours?

This is my test

setup({el, App, props}) {
    render(<App {...props} />, el)
    import('./test.js')
},

@Sinnbeck Here it is:

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
            import ('./template.js');
    },
    progress: {
        color: '#4B5563',
    },
});

@Armani Are you sure you need to return anything? That isnt in the docs

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) }) //removed return
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
          import ('./template.js');
    },
    progress: {
        color: '#4B5563',
    },
});

@Sinnbeck I didn't touch that part, when I installed Inertia it did all of it.

@Armani Hm ok. Well check here https://inertiajs.com/client-side-setup

Does not look like its needed :) Did you try it?

@Sinnbeck You're right it also works without return.