Error when using hmr with vite

[MartB]

Error: [vuex-class-module]: A module with name 'appModule' already exists.
    at VuexClassModuleFactory3.registerVuexModule (module-factory.js:137)
    at new accessor (module.js:28)
    at appModule.ts:66

When doing a hot-reload,the above gets logged and the hot-reload is aborted.

Im exporting the module like this: export const appModule = new AppModule({ store, name: 'appModule' })

Any idea how i can"supress" this error and make it replace the module correctly?

[bodograumann]

vuex-class-modules needs to be informed that a hot-reload is taking place: https://github.com/gertqin/vuex-class-modules/blob/master/src/module-factory.ts#L172-L181 I guess this is something webpack specific and thus not set with vite. Does vite have something similar?

[MartB]

@bodograumann is this what you are looking for? https://vitejs.dev/guide/api-hmr.html

Seems like it should be possible to implement this.

[bodograumann]

I wonder how vuex itself handles vite hmr. They do look at module.hot, but I couldn’t find import.meta.hot in their code. That could be a good place to start.

[ndresx]

A workaround could be to check if the module has been already registered and then unregister it before the @Module part. Not the best solution for sure, but might help to overcome this issue.

if (store.hasModule(moduleName)) {
  store.unregisterModule(moduleName);
}

[gertqin]

I'm not a fan of unregistering the module, as it is most likely a bug to add two modules with the same name in production.

Regarding vite I took a quick look at the types it provides, but they conflicted with other types. As we are also looking towards using vite in our projects, I think the simple solution will just be to add a vite-shims.d.ts which defines import.meta.hot.

[gertqin]

Fixed with 7cc6e9c80f1d4416b328fdfb1fc4bd558d162587. Not the cleanest solution, but should work for now.