Mobx store has data, but when passed as props - it's becomes undefined

[peshoicov]

I have top level React component - App.js - which simplified is like this:

import React from 'react';
import { appStore } from './state/appStore';
import CartPage from './pages/CartPage';
export default function App() {
  console.log('STORE IN APP:', appStore);
  return <CartPage store={ appStore } />;
};

And CartPage is like this:

import React from 'react';
import { observer } from 'mobx-react';

const CartPage = observer((props) => {
  const { store } = props;
  console.log('STORE IN CART: ', store);
  ...
});

In <App /> the console.log correctly shows the data in the store, but in <CartPage /> - I get no such thing as store ... ?

Any idea what I'm missing here?

[mweststrate]

That should work in general, so probably you need a better repro :)

[peshoicov]

@mweststrate - the project is created with create-react-app ... could that be the problem? ... I am not using decorators and I saw that using them is the only known issue between these two.

But still, if this is the problem - do you know of a way to fix this?

[urugator]

Remove the observer, if problem persists, it's probably not related to mobx.

[urugator]

If removing observer solves the problem, try to disable HMR/FR (hot module replacement/fast refresh).