Child states being undefined

[necronflux101]

Hi all,

I have an issue with Child state declaration that runs into a runtime error in the browser,

I have a state that has multiple children:

@State<ParentState>({
  name: STORE.PARENT,
  defaults: initDefaults(),
  children: [
      ChildStoreA,
      ChildStoreB,
      ChildStoreC
   ]
})

this is lazy loaded via a forFeature in the imports of a module like this:

NgxsModule.forFeature([
      ParentState,
      ChildStoreA,
      ChildStoreB,
      ChildStoreC

    ])

It compiles okay. But in the browser I get the following error:

Error: Child state not found: undefined. 
You may have forgotten to add states to module
    at findName (ngxs-store.js:450:13)
    at Array.map (<anonymous>)
    at ngxs-store.js:459:37
    at Array.reduce (<anonymous>)
    at buildGraph (ngxs-store.js:454:23)
    at _StateFactory.add (ngxs-store.js:1597:24)
    at _StateFactory.addAndReturnDefaults (ngxs-store.js:1637:31)
    at new _NgxsFeatureModule (ngxs-store.js:2183:29)
    at Object.NgxsFeatureModule_Factory [as useFactory] (ngxs-store.js:2196:10)
    at Object.factory (core.mjs:3322:38)

when i check the sources i can see that the ParentStore did not load on the child stores correctly:

I have removed all instances of @Select from the module and its dependent, solely using this.store.select.

I have tried moving the states to the forRoot too.

The same seems to work if i set the parent to have no children:

@State<ParentState>({
  name: STORE.PARENT,
  defaults: initDefaults(),
  children: [ ]
})

and keep the forFeature the same.

NgxsModule.forFeature([
      ParentState,
      ChildStoreA,
      ChildStoreB,
      ChildStoreC

    ])

Been hammering at this for quite some time and going through known issues, is there any way i can keep using the children and get it to load correctly ?

[markwhitfeld]

@necronflux101 It is quite difficult to determine the issue from your examples.
It is best to try to reproduce it in a stackblitz example. Usually the mistake becomes clear when trying to create a reproduction.
This would probably have been better to log as an issue as opposed to a discussion. This instruction is part of the standard issue template.

That being said, child states are actually marked for deprecation in NGXS v18.
In the 7 years that this feature has been around, we have not seen a single use case where it brings more benefit than complexity.

[necronflux101]

Hi Mark,

We got this issue while migrating our angular builder from webpack to esbuild. The same stores etc used to work as is in webpack which just makes it more puzzling.

Upon further discussion with the team. We have decided to comply with the deprecation and flatten out our stores.

I will close this discussion.

[markwhitfeld]

By the sounds of it, it could be to do with the way that the bundler is handling shared files.
Perhaps the bundler is including the same class in separate files as opposed to a common bundle?
...but this is a total guess 🤷

[markwhitfeld]

Out of interest, can you share the scenario you want to use child states for?

[necronflux101]

We use the child states purely for organisation of our stores based on features. We have a pretty large application with 1000+ components and dozens of stores for separate features.

Having child states to group some of those stores by their feature definition helps to maintain the application by making it easier for us to debug state changes using the ngxs logger.

[markwhitfeld]

Thank you for the explanation. This is a very common use that we have seen. Where it is more around the grouping of states for a feature.
The new provideStates function (see Lazy Loading) should provide a good way to group states that should be provided together.