Mobx observable not working in release build

[Lelelo1]

I have used the state management tool MobX in my app and everything has worked in debug - but in release however - MobX observables has stopped working and no more triggering render.

Usage, where I have button:

<$Button ref={this.recordButtonRef} text={"Personuppgifter"} onTap={() => {
    console.log("settin: " + !FormViewModel.get().isHidden);
    FormViewModel.get().isHidden = !FormViewModel.get().isHidden;
}}
/>

Where the FormViewModel is synonymous to a "Store":

@observable
isHidden = true;

And a form is rendered depending on the value of isHidden:

renderForm() {
    return FormViewModel.get().isHidden ? null : ( 
        <$CardView
            forwardedRef={this.cardViewRef}
            margin={10}
            borderWidth={2} 
            shadowOffsetHeight={2}
            shadowOffsetWidth={1}
            className={"cardStyle"}
         >
         <Form ref={this.formRef} />
     </$CardView>

        );
    }

Note that most of the app was developed without rns-reactify and those parts has also stopped functioning where they are using mobx observable. I am never calling setState in my app - using mobx instead.

---

My dependencies are the following:

"dependencies": { "@nstudio/nativescript-cardview": "^1.0.0", "@nstudio/nativescript-checkbox": "^1.0.0", "mobx": "^5.13.0", "mobx-react": "^6.1.3", "nativescript-carousel": "^6.1.0", "nativescript-cfalert-dialog": "^1.0.15", "nativescript-contacts": "^1.6.2", "nativescript-email": "^1.5.5", "nativescript-floatingactionbutton": "^5.1.0", "nativescript-iqkeyboardmanager": "^1.5.1", "nativescript-theme-core": "^1.0.6", "nativescript-toasty": "^2.0.1", "react": "^16.9.0", "react-nativescript": "^0.12.0", "rns-reactify": "git+https://github.com/Lelelo1/rns-reactify.git", "tns-core-modules": "6.0.1", "tns-platform-declarations": "^6.0.6" }, "devDependencies": { "@babel/core": "^7.5.0", "@babel/plugin-proposal-class-properties": "^7.5.0", "@babel/preset-react": "^7.0.0", "@types/react": "^16.9.2", "awesome-typescript-loader": "^5.2.1", "babel-loader": "^8.0.6", "fork-ts-checker-webpack-plugin": "^1.3.7", "nativescript-dev-webpack": "1.0.1", "react-nativescript-hot-loader": "git+https://github.com/shirakaba/react-nativescript-hot-loader.git", "typescript": "3.4.5" },

[shirakaba]

This is a complete guess, but try updating to react-nativescript v0.15.0 (you can ignore the complaint that a peer of tns-core-modules@^6.2.1 hasn't been provided, as I'm not actually using any v6.1.x/v6.2.x features in that release). No need to migrate to a newer NativeScript just to try this particular new release of react-nativescript. I'm just thinking that it could be that mobx-react relies on hooks, and that updating to the new hooks-friendly RNS may help that.

I've never used MobX, so I'd need to investigate what @observable does to understand how RNS might be conflicting with it.

The very strange thing is that it only affects release builds :/

I'm not doing much different in release mode to my knowledge (just turning on minification, etc.), but maybe React Reconciler or MobX-React behaves differently in release mode, for example.

Is your project closed-source? Feeling a bit low on details here (though I appreciate that it's a strange issue), so can't give many suggestions.

[Lelelo1]

I do get errors after updating react-nativescript. The TextBase.d.ts (only) seem to have changed nativescript import paths to the newer ones:. Inside TextBase.d.ts:

I don't know how though looking in TextBase component. It is required to resolve all errors to be able to produce a release build.

[shirakaba]

Oh well, looks like you'll need to update to NativeScript v6.2.x to clear that error :( I found it to be a painless and easy process for my RNS apps, however. The command to do that is simply:

# In the root of your project
tns update

[Lelelo1]

I will just have to update all imports I have made in the project. It was not until late into it I started to import from ElementRegistry.

[shirakaba]

Importing from ElementRegistry should actually still work for now (although I'll be removing them in a future release, as @nativescript/core serves the same purpose, only more elegantly and thoroughly).

[Lelelo1]

I now get the following errors after when tns run android

ERROR in [at-loader] ./node_modules/mobx/lib/api/flow.d.ts:8:83 TS2315: Type 'Generator' is not generic. ERROR in [at-loader] ./node_modules/mobx/lib/api/flow.d.ts:8:108 TS2304: Cannot find name 'AsyncGenerator'. ERROR in /Users/hemma/Projects/avfallshamtning/node_modules/mobx/lib/api/flow.d.ts ERROR in /Users/hemma/Projects/avfallshamtning/node_modules/mobx/lib/api/flow.d.ts(8,83): TS2315: Type 'Generator' is not generic. ERROR in /Users/hemma/Projects/avfallshamtning/node_modules/mobx/lib/api/flow.d.ts ERROR in /Users/hemma/Projects/avfallshamtning/node_modules/mobx/lib/api/flow.d.ts(8,108):

I'ts currently not working on android emulator in debug (but it does on android device). And I have not tried to make another release build on Android as all error has to be solved first. @shirakaba If you have want to check out the project i'ts now public here: https://github.com/Lelelo1/avfallshamtning

[shirakaba]

Thanks for providing the source. I’ll try to determine what the problem is if I have time tonight.

[shirakaba]

But for now, my only thoughts are:

• Need to clean the Android debut build
• Maybe Awesome TypeScript Loader needs to be updated to use a newer TypeScript version or something...

[Lelelo1]

It was tns update --markingMode needed when running on android emulator (which is api 28) (while android phone is api 23). This could very well be what is needed to make a release apk from Nativescript sidekick which works everywhere, on phone and emulator and can be sent to google play store

[shirakaba]

Ah, so do you mean that that resolved the problem with at-loader?

[Lelelo1]

Ah, so do you mean that that resolved the problem with at-loader

I don't know. There was simply a big yellow warning telling me to tns update --markingMode after I updated to NativeScript v6.2.x.

And I was able to get rid the type errors in mobx by downgrading mobx to 5.13.0. I will make a new release build later today and see if everything works.

[shirakaba]

Okay, keep me updated on any problems you might be stumped by.

[Lelelo1]

I am still experiencing the problem with a newly made release apk. I have realised it is by pressing one button that:

• does not show it's content like it does in debug
• causes other things relaying on mobx observables to fail.

The other things relaying on mobx is in fact working as long as the particular button is not pressed. The code of the button is what I presented when opening the issue. So I believe the fault is in fact in rns-reactify

[Lelelo1]

I removed rns-reactify and it worked.

Which means I am instantiating CardView outside jsx - and handling show and hide (add/remove) in componentDidMount. Like I had done in the other parts of the app.

<$ContentView ref={this.formContainer}>
    <Form ref={this.formRef} />
</$ContentView>