Vuex nuxtServerInit not being called

[christopher4lis]

Versions

nuxt-vite: ^0.1.0 nuxt: ^2.15.4

Description

Usually nuxtServerInit is called once on page load when using the webpack build. With nuxt-vite, it doesn't seem to be called at all. Is this something with SSR being disabled by default? To replicate, just add the nuxtServerInit action to a store, console log some code, and you'll see it's never outputted when using nuxt-vite.

[DengSihan]

Any solutions yet? Same problem.

I have to render an authed page in server-side before it been sent to client.

Versions

nuxt: ^2.15.6 nuxt-vite: ^0.1.1

Reproduction

Those code run well when using webpack

nuxt.config.js

module.exports = {
    buildModules: [
        'nuxt-vite',
        '@nuxtjs/router',
    ],
    router: {
        middleware: [
            'check-auth'
        ]
    },
    vite: {
        server: {
            watch: {
                usePolling: true
            }
        }
    }
}

store/index.js

import { cookieFromRequest } from '~/utils';
export const actions = {
    nuxtServerInit({ commit, dispatch, route }, { req }){
        const token = cookieFromRequest(req, 'token');
        if (!!token) {
            commit('auth/setToken', token);
        }
    }
};

store/auth.js

import Cookie from 'js-cookie';

export const state = () => ({
    user: null,
    token: null
});

export const getters = {
    user: state => state.user,
    token: state => state.token
};

export const mutations = {
    setToken(state, token){
        state.token = token;
    },
    fetchUserSuccess(state, user){
        state.user = user;
    },
    fetchUserFailure(state){
        state.user = null;
    },
    logout(state){
        state.token = null;
        state.user = null;
    },
    updateUser(state, { user }){
        state.user = user;
    }
}

export const actions = {
    saveToken({ commit }, { token, remember }){
        commit('setToken', token);
        Cookie.set('token', token, { expires: remember ? 365 : null });
    },
    async fetchUser({ commit }){
        try{
            const { data } = await this.$axios.get('/auth/user');
            commit('fetchUserSuccess', data);
        }catch(e){
            Cookie.remove('token');
            commit('fetchUserFailure');
        }
    },
    updateUser({ commit }, payload){
        commit('updateUser', payload);
    },
    async logout({ commit }){
        try{
            await this.$axios.delete('/auth/authorizations');
        }catch(e){}
        Cookie.remove('token');
        commit('logout');
    }
}

middleware/auth.js

export default async ({ $axios, store }) => {
    const token = store.getters['auth/token'];
    if (process.server) {
        if (token) {
            $axios.defaults.headers.common.Authorization = `Bearer ${token}`;
        } else {
            delete $axios.defaults.headers.common.Authorization;
        }
    }
    if (!store.getters['auth/check'] && token) {
        await store.dispatch('auth/fetchUser');
    }
}

[eric-2d]

I have it working with

vite: { ssr: true } in nuxt.config.js

[provabeer]

any update on this? i tried to enable ssr on vite config but got some internal modules error and a big increase of memory usage on my project.

[wobsoriano]

any update on this? i tried to enable ssr on vite config but got some internal modules error and a big increase of memory usage on my project.

What specific error? File system access? https://vitejs.dev/config/#server-fs-allow

[provabeer]

I don´t know why exactly but the error message is no longer appearing.

Enabling srr makes nuxtServerInit work again.

I just note two facts when enabling Vite SSR on my project:

1. Increase of memory usage in dev mode. Memory usage jumps from 200mb to 1.2gb.

2. Slow load time for css and components of page in dev mode.

Is this expected behavior?

Update:

I found that the memory increasing usage was caused by pnpm (in my case). So I switched to yarn and I'm no longer having increased memory usage issue on enabling ssr on vite.