TypeError: can't convert undefined to object

[SimonChaumet]

Intended outcome:

I want to access my root store from my children stores without passing the root store argument all the way down.

Actual outcome:

I get TypeError: can't convert undefined to object in the console with no stacktrace as soon as I add my code to access the root store.

How to reproduce the issue:

// root store
export class StoreRoot {
    catalog: StoreCatalog;

    constructor(catalogData: IRCatalog) {
        makeAutoObservable(this);
        this.catalog = createStoreCatalog(catalogData);
    }
}

export const ROOT_STORE = createRootStore();

function createRootStore(): StoreRoot {
    return new StoreRoot(catalogData);
}

// child store in separated file
export class Theme implements ITheme {
    themeId: number;
    title: string;
    _contexts: Context['contextId'][]

    constructor(theme: ThemeConstructorOptions) {
        makeAutoObservable(this);
        this.themeId = theme.themeId;
        this.title = theme.title;
        this._contexts = theme.contexts;
    }

// This function is the code I want
    /* get contexts(): IContext[] {
        return this._contexts.map(contextId => ROOT_STORE.catalog.contexts[contextId]);
    }*/

    get contexts(): IContext[] {
        console.log(ROOT_STORE); // When adding this line I get the error
        return [];
    }
}

Versions

• MobX 6.0.3
• MobX react 6.3.1
• React Native 0.63.3
• React 16.31.1

[danielkcz]

Please provide a reproduction with eg. CodeSandbox. Glancing over your snippet I don't see anything wrong so we need to inspect the problem in live code.

[SimonChaumet]

The problem seems to come from the cyclic import, so I moved the root store access to the constructor but the example in https://mobx.js.org/defining-data-stores.html doesn't seems to work

[mweststrate]

Yeah those can be nasty. In that case it is not really a MobX problem. For some tips on dealing with it: https://medium.com/visual-development/how-to-fix-nasty-circular-dependency-issues-once-and-for-all-in-javascript-typescript-a04c987cf0de. Note that in TypeScript / Flow you can now use `import type` rather than import to break circular deps

…

On Wed, Nov 4, 2020 at 5:45 PM SCAREX ***@***.***> wrote: The problem seems to come from the cyclic import, so I moved the root store access to the constructor but the example in https://mobx.js.org/defining-data-stores.html doesn't seems to work — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2595 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBEACSYQDXCMVWBDG4DSOGHK5ANCNFSM4TKJ26WQ> .

[SimonChaumet]

@FredyC @mweststrate yes but the example is still incorrect : the components doesn't update when modifying objects in the rootstore

[danielkcz]

@SimonChaumet We need more info, what example on that page and what behavior do you expect? There are no imports, so if you see some typo (totally possible), feel free to submit a PR.

[SimonChaumet]

this one : https://mobx.js.org/defining-data-stores.html#combining-multiple-stores which is missing some observable properties

[danielkcz]

@SimonChaumet You need to be even more specific, I don't see anything wrong there.