VSF Module extending in 1.11.1

Hello,

I had been using VFS 1.9.0 for a while now and now in a process of up-gradation to 1.11.1.
I am facing issue in module extending.

I tried to extend the user module login function. I followed the steps in the extending module documentation. but I am not able to extend the module cleanly.
The problem is that the login function gets called twice(i.e. core login function as well as extended login function). Its like I am registering the function twice.
please find the code snippet below.

The index.ts.png has the sample code snippet fron the docs in comments.
the main problem lies in the import :

import { Cart } from '@vue-storefront/core/modules/cart'

the Cart is not present here.
Could someone please help me in solving this issue. I have been stuck with it for few days.
Or update the docs with correct steps.

Hi, I’m not so familiar with extending core modules, but I’m pretty sure the import should be:

import { CartModule } from '@vue-storefront/core/modules/cart'

as found in /source/modules/client.ts

@grimasod : thanks for the reply.
I also felt the same. But if i try to add CartModule in line 48 of client.ts.png

export const registerModules: VueStorefrontModule[] = [CartModule]

I get the error:

You’re welcome.
Have you tried registerModule?

import { registerModule } from '@vue-storefront/core/lib/modules'
export function registerClientModules () {
  ...
  registerModule(CartModule)
  ...
}

@grimasod: From what I understand register module is to register a new module. What I want is to override already existing module’s function.
Please correct me if I am wrong.

As I understand it, the module should be extended before it’s registered, so there’s only one registration of each module.

Previously all modules were registered using registerModules, but that’s been deprecated and registerClientModules is used instead. The documentation hasn’t been updated though.

I guess it should be like this:

import { Cart } from '@vue-storefront/core/modules/cart'
import { ExtendCartModule } from 'extend-cart'
import { registerModule } from '@vue-storefront/core/lib/modules'

extendModule(ExtendCartModule.config)

export function registerClientModules () {
  ...
  registerModule(CartModule)
  ...
}

I haven’t tested this and I don’t know if extendModule still works the same way. To be honest, it’s a long time since I extended a core module. I generally either make new modules for complex tasks or just override individual methods using custom components for smaller tasks.

But please give it a try :smiley:
If it doesn’t work I’ll have another look at it next week

Hi @grimasod,
I had tried that earlier as well. but it didnt work.
i tried to add the extend module before registerClientModules and even tried after as well9just for my satisfaction). But it still uses the old module only.

Hi @maneesh,
Yeah, you’re right. I finally got a chance to try it myself and I don’t see how it works with the latest module registration mechanism. I can’t find it mentioned in the upgrade notes or any docs either.
Maybe @pkarw can help?