Mobx 6 observable not working correctly with mobx-router5

Viewed 153

After migration from Mobx 5 to Mobx 6 for some unknown reason, components stopped rerendering when router path is changed. routerStore5 seems like its not observable even if its decorated by it. State inside routerStore5 is changing, but components dont react for this state change. In Mobx 5 it worked fine but in new Mobx it does not. Is there some problem with package compatibility?

this connect is used as decorator for components which should have access to Mobx store

export function componentConnect(target) {
   return inject('stores')(withTheme(observer(target)));
}

Router store is accessible via connect above

  export class RouterStore {
  @observable routerStore5: RouterStore5;

  constructor() {
    const routerStore = new RouterStore5();
    const router = createRouter(routes, {
      defaultRoute: 'home',
      queryParamsMode: 'loose'
    });
    router.usePlugin(mobxPlugin(routerStore));
    router.usePlugin(browserPlugin({ useHash: false }));
    makeObservable(this);
    this.routerStore5 = routerStore;
    this.routerStore5.router.start();
  }
}

Here is list of used npm packages:

"router5": "^8.0.1",
"router5-plugin-browser": "^8.0.1",
"react-router5": "^8.0.1",
"mobx": "^6.1.8",
"mobx-react": "^7.1.0",
"mobx-router5": "^4.3.0",
"mobx-utils": "^6.0.3",
0 Answers
Related