HMR and SyncAllFiles broken on Android

[NathanaelA]

Please, provide the details below:

Did you verify this is a real problem by searching the: yes

Tell us about the problem

tns run android --hmr --syncAllFiles does not sync the node_modules files on any changes. It just seems to ignore them.

Which platform(s) does your issue occur on?

Android (untested on iOS)

Please provide the following version numbers that your issue occurs with:

• CLI: 4.3.0-2018-09-12-12207
• Cross-platform modules: 4.2.0
• Runtime(s): 4.2.0
• Plugin(s): Webpack: "^0.17.0-2018-09-11-02"

Please tell us how to recreate the issue in as much detail as possible.

I have a demo app in my nativescript-localstorage; because the plugin is pointing to ../src npm creates a symlink between ../src and demo/node-modules/nativescript-localstorage/ So any changes done in ../src are the same as what are done in the node-modules. So I type tns run android --hmr --syncAllFiles and then let it start the app. I can change any demo\ folder stuff; and HRM kicks in a makes the changes (!!! AWESOME WORK GUYS !!!).

However, in my editor if I change the localstorage.js file; to test things.

It sits for a while and then this Log Shows after changing JS in node-modules plugin folder

Executing before-shouldPrepare hook from D:\projects\nativescript\repos\nativescript-localstorage\de
mo\hooks\before-shouldPrepare\nativescript-dev-webpack.js
Preparing project...
Executing before-prepareJSApp hook from D:\projects\nativescript\repos\nativescript-localstorage\dem
o\hooks\before-prepareJSApp\nativescript-dev-webpack.js
Project successfully prepared (Android)
Executing after-prepare hook from D:\projects\nativescript\repos\nativescript-localstorage\demo\hook
s\after-prepare\nativescript-dev-webpack.js
Successfully synced application org.nativescript.demo on device 192.168.122.101:5555.

So it detected something was changed, However it never actually synced any files, nor restarted the app. If I manually restart the app; the changes aren't present. (In prior version of TNS the --syncAllFiles, it lists the files that it found that changed, so the above log does not show it found any files).

cc: @vtrifonov

[vtrifonov]

Hi @NathanaelA, basically you don't need to add --syncAllFiles when you are using --bundle or --hmr.
In order to make HMR work with your local storage plugin you'll need to make some changes there as I see here you are setting global.localStorage only if it does not exist, but HMR will rerun this module if it is updated, but as the global.localStorage already exists that closure won't be executed, so I would advise using if (!global.localStorage || module.hot) instead. module.hot will be true only if you are running in HMR mode. Another thing will be to accept the module change, basically we accept all the changes made inside modules required in a -page.js when you are using JS/TSC (we are adding module.hot.accept at the end of the file through a webpack loader), but in your demo you require you plugin inside the app.js file.
We don't add module.hot.accept in the app.js as reloading the file would try to start the application again and this will result in an error. So in your case you can either move require('nativescript-localstorage'); inside one of the pages or view modes (view models are required in the pages, so changes there will be accepted by the module.hot.accept inside the page file).
In you case however it would be better to add 'module.hot && module.hot.accept();' at the end of your localstorage.js file as this will make the HMR reload only your localstorage.js file when you make changes there, but this will be enough as it will change the global.sessionStorage behaviour.
You can find more details how webpack HMR work here.
I'm going to add a PR in your nativescript-localstorage repo with the changes above.

[NathanaelA]

Thank you; I think I fully understand the issue. I appreciate the detailed feedback!

In my tests; I was adding a console.log outside/before the if statement, so it wasn't causing the issue. I realized the if statement would short circuit the changes; so thanks for telling me how to ignore it in the future also... Very helpful! 😀

Basically the main issue was that module.hot && module.hot.accept(); wasn't getting auto-added to the file (which is required for it to be updated); because the plugin was required from app.js which caused it to not be in the HMR list of files. So by manually adding it to the plugin we will then add it to the hmr list. 👍

In addition, this discussion has made me realize that the hmr.accept() code is only being auto-added to the *-page.js files (and then any requires/imports from them). So if in my app I have a different page file names (like mainpage.js), I should make sure to add a rule to the webpack config file manually to catch them; or manually add the hmr code to it. 😀

[vtrifonov]

@NathanaelA using different page bames can cause you other issues with webpack as well 😊, you can check here under Bundle config loader