"Organizing the services in your project" example code is not SSR compatible

I believe it’s not a bug in Feathers-Vuex itself and just a problem with the example code.

Expected behavior

The guide provides a code example for Organizing the services in your project with the use of require.context.

https://feathers-plus.github.io/v1/feathers-vuex/common-patterns.html#Organizing-the-services-in-your-project

Actual behavior

It works fine in the browser but fails on the server when used in SSR mode.

When you run the server, then open the page in browser and hit refresh, the server tries to redefine store property on the services managed by this feature. The result is:

{ TypeError: Cannot redefine property: store
    at Function.defineProperties (<anonymous>)
    at setupStore (/home/gusto/rpg/services-test/node_modules/feathers-vuex/lib/service-module/service-module.js:128:14)

Using service('users') without require.context behaves properly.

I did try to fix it but failed.

Repro

https://github.com/gustojs/feathers-vuex-services-test

System configuration

Linux Mint Feathers-Vuex 1.3 Nuxt 1.4 Node 10.1 npm 6.0.1

[JaneOri]

Just ran into this same problem and now have a minimal solution.

Documentation code issues:

Issue 1 is that the main file exports new Vuex.Store(...) directly but should be exporting a function, createStore that returns the instance. (Also the Nuxt docs say it should be called index.js instead of store.js but maybe there is another way to set it up that I haven’t run into yet)

Issue 2 is calling the service function outside of that createStore function and reusing the first instance on a subsequent call.

Solution:

1. Wrap the main export new Vuex.Store(...) to a createStore function and export default createStore instead
2. In the service file, change: const servicePlugin = service(servicePath, { to this: const servicePlugin = () => service(servicePath, {
3. in the main file, change: modulePath => requireModule(modulePath).default to this: modulePath => requireModule(modulePath).default()
4. Move const servicePlugins = line into the createStore function that’s exported so the calls to service functions only happen during the execution of createStore

I am green here so if any of this is problematic in some other way, please let me know.

Hope it helps!

[DreaMinder]

In nuxt@3 classic vuex usage new Vuex.Store will be deprecated. There has to be another solution…