Mobx App.tsx observation with Vite does not work

[IlyaLisov]

Hi, I moved to Vite from react-scripts and I found that my App.tsx file with routes is not observable any more.
This is example of some routes I have:

const {store} = useContext(Context);
...
<BrowserRouter>
  <Header/>
    <Suspense fallback={<Spin/>}>
      <Content>
	<ScrollToTop/>
	<Routes>
	  <Route
	    path="/auth/*"
	    element={!store.getAuth()
	      ? <Routes>
		  <Route path="/login" element={<Login/>}/>
		  <Route path="/register" element={<Register/>}/>
		  <Route path="/confirm" element={<RegisterConfirm/>}/>
		  <Route path="/restore" element={<PasswordRestore/>}/>
		</Routes>
		: <Account/>
	    }
	  />
        </Routes>
      </Content>
    </Suspense>
  <Footer/>
</BrowserRouter>

export default observer(App);

store is an instance of store with authenticated user status:

const store = new Store();

export const Context = createContext({
	store
})

const app = (
  <Context.Provider value={{store}}>
    <HelmetProvider>
      <App/>
    </HelmetProvider>
  </Context.Provider>
);

const rootElement = document.getElementById('root')!;

ReactDOM.render(app, rootElement);

export default class Store {

	private user: IUser;
	private isAuth: boolean;

	constructor() {
		makeAutoObservable(this);
		this.user = {} as IUser;
		this.isAuth = false;
	}

        logout() {
		localStorage.removeItem('token');
		localStorage.removeItem('refreshToken');
		this.setUser({} as IUser);
		this.isAuth = false;
	}
...
}

For now If i logout and store.user was changed, in App.tsx previous Routes are applicable until I reload the page and rerender App.tsx.

This worked with react-scripts and now it isn't. I don't know whether it is related to Mobx or Vite (I heard about some troubles with it), and I also have not found any solutions for this problem.
I'd be glad to your help and advices to refactor such solution.

[mweststrate]

I don't see an observer around your components. Does it make a difference if the makeAutoObservable is moved to the end of the constructor? If so, class compilation flags deviate to be non-standard (probably can be worked around by initializing fields at the declaration).

[IlyaLisov]

I moved initialization from constructor directly to the fields and now it works! Thank you very much!

[mweststrate]

It might be worth checking if you can change the compiler config to become spec compliant, otherwise this will remain a footgun: https://mobx.js.org/installation.html#use-spec-compliant-transpilation-for-class-properties