Files were called multiple times in the SSR mode ?

[yaquawa]

Hi, I ran into a problem that I don't know why..

it's hard to explain, I've created a repo for reproducing this issue. https://github.com/yaquawa/vitesse-ssr-template-bug

I just add a several new lines of code, you can see the diff by comparing to the last commit of the original one. This issue only occurs in the SSR mode, I've been debugging this issue for over a day, but still have no idea what was happening, so I came here for your help..!😭

basically this line of code should only be called once, but seems like it was be called more than once? The store itself is nothing but just a Map object. so it looks like there was nothing to do with the store.

[frandiox]

@yaquawa Hi! It seem to be a weird incompatibility with that dependency's ESM/CJS and Vite under some circumstances. Try adding it to the Vite's optimize deps in vite.config.js:

  optimizeDeps: {
    include: ['vue', 'vue-router', '@vueuse/core', '@harlem/core'],
    exclude: ['vue-demi'],
  },

That makes it work in my environment at least 👍

[yaquawa]

@frandiox Thanks for replying! I've tried your method, but unfortunately it only works on the first load, if you try to reload the page, same error shown up 😢 can you reproduce this ? (you may want to clear the vite cache first before trying)

[frandiox]

@yaquawa Add 'vite-ssr/vue/entry-server' to the same array 👀

[yaquawa]

@frandiox Thanks! That works! But could you explain what was the problem here..? Thanks!

[frandiox]

@yaquawa Basically, Vite can load new dependencies automatically as it finds them .vite-ssr is toggling the entry-server dependency after the dev-server has started, so it triggers a reload in Vite at the beginning.

For some reason, this reload that Vite performs can break the other dependency you have (@harlem/core) since it reloads the file but for some reason the state of that dependency is not refreshed (so it throws that it has already been called).

By adding both dependencies to the optimizedDeps, Vite will prepare these dependencies from the beginning so it doesn't need to do an initial refresh after adding entry-server.

I've released vite-ssr@0.6.6, which automatically adds itself to these optimizedDeps so you don't need to do it yourself. Try upgrading your repo.

However, I think you will still have problems with @harlem/core if anything else in Vite triggers a dependency reload (like when you add a new dependency without restarting the dev server).

[yaquawa]

@frandiox Thanks for the details! Got it, and thanks for the update!

hmm, that's so weird..🙁

I think maybe I could just use SPA mode in my local machine when I'm in developing, and deploy it with the SSR mode, so I can just ignore the optimizedDeps settings ?

[frandiox]

@yaquawa I think it will be problematic with SPA mode as well since this is a conflict between @harlem/core and the way Vite reloads stuff, I think.

In any case, after upgrading to vite-ssr@0.6.6 the SSR mode should not trigger that initial Vite reload so it should work normally.

If you add new dependencies you will probably need to restart the server (SSR or SPA, shouldn't matter) but I guess that's not too bad 🙃

[yaquawa]

@frandiox Maybe this really should be reported in the Vite repo 😌 anyway, thanks for your quick reply! really saved my time..!

[yaquawa]

@frandiox I found that put both @harlem/core and vite-ssr/vue/entry-server in the exclude field also works...

[frandiox]

@yaquawa I guess as long as Vite is aware of those dependencies from the beginning it won't trigger a reload, which is what breaks @harlem/core. Maybe it's something that can be reported in Vite repo itself, not sure.

[yaquawa]

@frandiox You're right, and I think you may want to put vite-ssr/vue/entry-server in the exclude field, because it's already an ESM. I've just opened an issue at here https://github.com/vitejs/vite/issues/2615