Conflict between babel decorator plugin & react-navigation v5

Yoyo, it's me again, stumbled upon some issues that took away almost my whole day!

So what I did again? to ruin my day? 💀 Used up 3 computer just to test this weird stuff (1 M1 Macbook Air, 1 Windows PC, 1 Normal Macbook Pro)

My initial intention was to start a new RN project with newer Mobx library + minor API integration to test the loading speed vs old MobX + Mobx State Tree library. (because some issue was being found in our app that is causing extreme slowness on Android devices - and after I read this article: https://itnext.io/fairytale-about-performance-in-web-application-ed2bf12627fc, I suspect... yeah it might be the mobx-state-tree library 👿)

And soooo, I started by initiating new React Native project using my M1 Mac (okay things will behave badly because there is a lot incompatiblity issues for M1 mac - 1st)

(eg. yarn install will result in packager not starting properly - cannot find "base" in snapdragon.js - donno what is the root cause lols, so I resort to using npm install..😬)

Then, hand itchy and turn on Hermes (since they said hermes improve performance alot) 😅 - (2nd)

Everything went smoothly at the moment. App able to run in both iOS simulator and Android emulator ~ Hermes Engine is on ~ 😇

Then I proceed to install some libraries to achieve the goal.. and here's the libraries: 

- mobx, mobx-react

- axios (for API), 

- react-navigation v5 (for navigating to another screen, and to test the authentication flows.. but why v5? I was always using v4 up until now, so I decided to try out v5 since v6 is coming out soon..lols 😅) 

In the hope of using decorators again (which we already used in past projects & find it hard to get rid of the sugar coat codes 😆), I proceed to add these two lines into my babel.config.js: (as stated in mobx official documentation: https://mobx.js.org/enabling-decorators.html) 

but I also notice the documentation actually mentioned using decorator syntax is not recommended for newer mobx library... (3rd)

I also integrated reactotron v5 (https://github.com/infinitered/reactotron) into the project in order to: 

- inspect the API response

- use the benchmark tool provided by reactotron - which is basically a timer that count the time taken from Statement A to Statement B (https://github.com/infinitered/reactotron/blob/master/docs/plugin-benchmark.md)

- but why v5 again? Because it is latest version... (4th)

Then I started coding some simple UI to facilitate the whole flow... 

Everything works smooth on the iOS simulator.. as in:

- I can see home screen, 

- I can navigate to another screen

- I can call API using axios linking with mobx actions & displaying data on the screen

- I can see all the logs in Reactotron, I can see the benchmarking stuff also (5th)

- Up until this point, I haven't stop my packager.. (why? this is the key here, will explain soon xD)

Just when I thought this is perfect & I proceed to test on Android Emulator... The app can build normally, can run normally.. but it wont call API at all.. yes, it will not FIRE API, and there is no errors, and nothing happen!

Spent hours trying to figure out what went wrong & found nothing!!! Arghhhhhhhh.. cannot even google because there is NO ERROR.. 

what I did initially of course is to comment codes & shifting the api calls' code to unlink from mobx, and just try to fire the API directly from the screen instead... okay no luck ~ still not working..

And what worried me even it that it cannot even connect to Reactotron (as I need this to use the benchmarking tool and I am lazy to write one myself LOLs), so I can only use Logcat in Android studio to see the logs that I written.. 👀

---- Tada --- Brainstorming time ---

Okay, noticed the 1st, 2nd, 3rd, 4th, 5th standing beside my sentences above? Those are the things I suspect that causing the issues.. lols don't ask me why that's how my brain works

- 1st - will it because my M1 Mac having incompatibility issues? (okay I proceed to test on my Windows PC, of course involving committing to git and cloning down from my windows & run yarn install from fresh, okay not working, okay let's try back npm install, okay still not working, why not go to next point?)

- 2nd - Hermes - will it because I turned on hermes causing all these weird thing coming out? (okay I try to turn off hermes & run ./gradlew clean & rebuild the app, still same !!)

- 3rd - I skipped this to the last resort because I don't want to lose the sugar coat syntax xD which is also why my day is ruined 😡

- 4th - reactotron v5 - will it because I installed v5? and it is breaking? nooooo.. I try to downgrade to v3.6.0 and no luck still lols..

- 5th - okay I'm using PC right now, and it only has android.. and reactotron is not working at all.. going back to M1 mac it is still working in iOS but not Android. So my last resort is to use the normal Macbook Pro, repeat the same process in 1st step, clone and install and test... but this time another issue popped out on iOS simulator.. which is this: 

TypeError: undefiend is not an object (evaluating 'this._callListeners.bind')

It just feels like navigation stuff, and I have no idea why it happen.. lols.. I turned my head back to my M1 Mac, and run again it is still working fine on iOS.. alot of question marks popping out lolsss

Before I copy the error to google, I try to react native init new project again, copying over same codes & it works again.. in New Project? lols.. Just when I thought it is because my 1st point - M1 mac causing the issue... I try to install the app from the new project I just created into my actual iPhone, the issue pop up again !! omg.. How many project I need to init now? 

Okay, then I go google the error and found this:

https://stackoverflow.com/questions/60463057/react-navigation-v5-evaluating-this-calllisteners-bind-when-this-props-navi

In stackoverflow, there is always different suggestion & it is not all working everytime.. so have to try 1 by 1.. one of them say have to remove all the plugins from the babel.config.js.. Which I don want to.. because our old project is using and it is working fine...one of them say need to add in "@babel/plugin-transform-flow-strip-types" into the plugin list and I try as well, it seems not working also

And then I found this:

https://github.com/react-navigation/react-navigation/issues/6154#issuecomment-518606309

OMG this just strike me in my head & rewinding back to all the issues I face just now lols.. That explains why my M1 mac ios simulator is working fine but my normal macbook pro is not working at all.. 

And then new project just works, and not working again when I install to my physical device... It is because I did not kill my packager during the process of init new project until i finish copied over the codes and installing libraries..

Okay, so I decide not to init another new project again.. and try to just remove 1 line from the plugin which is "@babel/plugin-proposal-class-properties" and just remain this 2..

Now ofcourse I will do "yarn start --reset-cache", and the app is back to normal! It is connected to Reactotron, the API call is success on Android & everything is back ! 😵

So why is this not happening in old project? is it because v4 react navigation doesn't have this issue? I have no idea & i donno why.

Sooo.. after all.. where is the time spent?

- mostly running yarn install or npm install

- ios - pod install + clean and rebuild

. android - /gradlew clean & rebuild, 

- initiating new RN project again

- suspecting my hand and fingers ... 👿 (copying wrong stuff / typing wrong codes)

- checking npm version, checking yarn version, checking library version ~ 😆

Yes, this is programmer life 😝 It just works & it just not works everytime ! 

Yarn install stucked 😡

Yooooooo I'm back!!!

Okay it has been a long time since I wrote about stuffs ~ I decided to record not only reactjs/react-native anymore but instead those issues that I faced & how I resolved it. So that in future if I stumbled upon the same issues I can refer back to here!

Everyday in developer life there is weird issues keep coming out. Sometimes it can be solved by stackoverflow / github issues. Sometimes it just can't! How frustrating ✌

My project "yarn install" was always working fine in Windows until today. It just stucked for no reason. I try yarn --verbose & it stucked at "GET" request for some random libraries. 

Search on google & people just recommend to "yarn cahce clean" "rimraf node_modules" "yarn install" again... 

I tried all the stuff including restart PC (yes that's what people do when things cannot be solved LOL)

And it still same! keep stuck at random library "GET" request.

Then I thought it was my SSH isssues. So I open "services" in windows, and my OpenSSH was indeed disabled (by who? god knows lols) Then I re-enabled it and run "ssh-add" it was working..

Then I try yarn install again... and it still stuckeddddddd

Not until I found this: https://github.com/DivanteLtd/open-loyalty/issues/85

Someone pointed out we can disable ipv6 for our adapter... and I tried.. and it worksssssss 😤

It turn out that actually the project has private repositories that hosted on Bitbucket & it uses SSH. Then I google relationship between ipv6 and yarn install & I got this: https://stackoverflow.com/questions/37860219/npm-gets-stuck-on-fetchmetadata-network

Someone explain that SSH by default prefers ipv6 connection...

But why my ipv6 isn't working suddenly? Is it because I moved my pc to another room yesterday and my PC is connected to a Mesh Node & the Mesh Node is now further away from the living room modem? 👀

Anyways, it works & i donno why ~

After my first attempt for yarn install is succeed, I enabled ipv6 back, and it continue to work.... lols.. what is happening?

There are just too many factors that can ruin and waste your daily developer life & you just donno why 😀

Time to get back to work (after spending few hours just to debug why I cannot yarn install 😟)