Component is not updating after store change (via axios)

[jimzhan]

Sample Repository

Env create-react-app + react-app-rewired

Versions

• react - v16.2.0
• react-dom - v16.2.0
• mobx - v3.4.1
• mobx-react- v4.3.5

[mweststrate]

Can you elaborate a bit? What steps do I need to do to reproduce? Which files are relevant? Are there any warnings / errors in your console?

[jimzhan]

Thanks @mweststrate & sorry for the missing steps to reproduce the issue. Please find the steps below:

git clone https://github.com/jimzhan/mobx-react-issue
cd mobx-react-issue && npm install && npm start

There is no any warning & error message after that. Actually I can see the store (UserStore.js) can fetch the data successfully, the issue is the store in Users.jsx does not get any updates (underlying users defined in UserStore.js# @observable users) upon a success data fetching. Thus, it can't be trigger for further UI updates.

[mweststrate]

@jimzhan I looked at the transpiled code and the decorator call didn't seem to be actually transpiled. But is there a reason you aren't using the prebuilt config for rewired? https://github.com/timarney/react-app-rewired/tree/master/packages/react-app-rewire-mobx

[jimzhan]

Thanks @mweststrate for the prompt response, if you look into config-overrides.js, I've already include transform-decorators-legacy, I suppose this is exactly the same as react-app-rewire-mobx you shared already?

[mweststrate]

Yes it does, but declaring a field in a class might need a separate transformation. It is not that decorators are not transpiled, the problem seems that the field declaration is entirely missing, which is a separate transformation as well (yeah I hate babel for this, TS just has some boolean flags and be done with it). So I think the basics are right, but some is still missing. That is why I recommend using something somebody else has figured out already :) Op wo 27 dec. 2017 om 11:40 schreef Jim Zhan <[email protected]>:

…

Thanks @mweststrate <https://github.com/mweststrate> for the prompt response, if you look into config-overrides.js, I've already include transform-decorators-legacy, I suppose this is exactly the same as react-app-rewire-mobx you shared already? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#381 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhLU2_MeqJvIWNMQ-PPbQo_2vOoXiks5tEh6fgaJpZM4RL7ay> .

[jimzhan]

@mweststrate switching to react-app-rewire-mobx doesn't change anything either :-(

[mweststrate]

@jimzhan how to disable that annoying compile error if a linting rule isn't obeyed? Makes it pretty impossible to test anything without disabling my IDE configs....

[jimzhan]

guess you can remove "eslintConfig" from package.json & rewriteEslint from config-overrides.js directly?

[mweststrate]

Something is really of in the project, the most basic debugger things don't work in the browser :(

[mweststrate]

Hmm in your users component you forEach over the users, you don't map over them, so your app won't render anything in any case. Fixing that doesn't solve the field not being compiled, but it might fix it if you are using rewire-mobx

[jimzhan]

tricky part is, I overwrite my App.js (from https://github.com/timarney/mobx-rewire-test/blob/master/src/App.js , with decorator), it works~

[mweststrate]

ok, swapping transform-class-properties and transform-decorators-legacy in your config file fixes the issue

[mweststrate]

...which is because https://github.com/timarney/react-app-rewired/blob/b2458a6df60136c4bbbb9e5e15dd107d035e40ff/packages/react-app-rewired/index.js#L30 will add new plugins in front of the list, since you added transform-class-properties later, it was applied earlier. Confusing.. (cc @timarney)

This also works and is more explicit in any case:

  config = injectBabelPlugin(["transform-decorators-legacy", "transform-class-properties"], config);

[jimzhan]

indeed, thanks :-)

[timarney]

@mweststrate thinking in the next rewire version we can alter so it will push plugins in so they don't end up in front and add a warning to rewire-mobx mentioning that it needs to be first in the config.