Nativescript-cli: HMR for shared apps does not work.

[NickIliev]

@FlavioShift3 commented on Thu Nov 08 2018

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 5.0.0
• Cross-platform modules: 5.0.0
• Android Runtime: 5.0.0
• iOS Runtime: 5.0.0

Describe the bug
After install I execute debug command (tns debug android --bundle) and all works well. After that I try to run (tns run android --bundle) my app and NS request to update webpack from 0.13.0 to 0.17.0.
I update webpack to version 0.17.0 (tns plugin add nativescript-dev-webpack) then NS does not compile.

I reinstall [email protected] and the app was compiled again. I also update nativescript-angular to version 6.2.0 to try to use HMR. also follow the changes on Github.com/NativeScript/nativescript-angular/wiki/HMR. But HMR does not work.

Here the logs I got with [email protected]:

$ tns debug android --bundle

Searching for devices...

Executing before-liveSync hook from .../hooks/before-liveSync/nativescript-angular-sync.js

Executing before-watchPatterns hook from .../hooks/before-watchPatterns/nativescript-dev-sass.js

Executing before-watchPatterns hook from .../hooks/before-watchPatterns/nativescript-dev-typescript.js

Executing before-watchPatterns hook from .../hooks/before-watchPatterns/nativescript-dev-webpack.js

Executing before-watch hook from .../hooks/before-watch/nativescript-dev-sass.js

Hook skipped because bundling is in progress.

Executing before-watch hook from .../hooks/before-watch/nativescript-dev-typescript.js

Hook skipped because bundling is in progress.

Executing before-watch hook from .../hooks/before-watch/nativescript-dev-webpack.js

Running webpack for Android...

.../node_modules/webpack-cli/bin/webpack.js:243

                            throw err;

                            ^

Error: Cannot find module 'nativescript-dev-webpack/host/platform'

at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)

at Function.Module._load (internal/modules/cjs/loader.js:507:25)

at Module.require (internal/modules/cjs/loader.js:637:17)

at require (.../node_modules/v8-compile-cache/v8-compile-cache.js:159:20)

at Object.<anonymous> (.../webpack.config.js:6:37)

at Module._compile (.../node_modules/v8-compile-cache/v8-compile-cache.js:178:30)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)

at Module.load (internal/modules/cjs/loader.js:599:32)

at tryModuleLoad (internal/modules/cjs/loader.js:538:12)

at Function.Module._load (internal/modules/cjs/loader.js:530:3)

at Module.require (internal/modules/cjs/loader.js:637:17)

at require (.../node_modules/v8-compile-cache/v8-compile-cache.js:159:20)

at WEBPACK_OPTIONS (.../node_modules/webpack-cli/bin/convert-argv.js:133:13)

at requireConfig (.../node_modules/webpack-cli/bin/convert-argv.js:135:6)

at .../node_modules/webpack-cli/bin/convert-argv.js:142:17

at Array.forEach (<anonymous>)

at module.exports (.../node_modules/webpack-cli/bin/convert-argv.js:140:15)

at yargs.parse (.../node_modules/webpack-cli/bin/webpack.js:240:39)

at Object.parse (.../node_modules/webpack-cli/node_modules/yargs/yargs.js:552:18)

at .../node_modules/webpack-cli/bin/webpack.js:218:8

at Object.<anonymous> (.../node_modules/webpack-cli/bin/webpack.js:515:3)

at Module._compile (internal/modules/cjs/loader.js:689:30)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)

at Module.load (internal/modules/cjs/loader.js:599:32)

at tryModuleLoad (internal/modules/cjs/loader.js:538:12)

at Function.Module._load (internal/modules/cjs/loader.js:530:3)

at Module.require (internal/modules/cjs/loader.js:637:17)

at require (internal/modules/cjs/helpers.js:20:18)

at Object.<anonymous> (.../node_modules/webpack/bin/webpack.js:80:2)

at Module._compile (internal/modules/cjs/loader.js:689:30)

Executing webpack failed with exit code 1.

Cannot read property 'kill' of undefined

To Reproduce
Just compile with webpack 0.17.0

Expected behavior
Expect compile and all new features works.

### My package.json:
{
"name": "row_forge_ns",
"nativescript": {
"id": "org.nativescript.row_forge_ns",
"tns-android": {
"version": "5.0.0"
},
"tns-ios": {
"version": "5.0.0"
}
},
"main": "main.js",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.1.7",
"@angular/cdk": "^6.4.7",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/material": "^6.4.7",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"nativescript-angular": "^6.2.0",
"nativescript-angular-cli": "^0.1.9",
"nativescript-bluetooth": "^1.3.1",
"nativescript-orientation": "^2.2.1",
"nativescript-theme-core": "~1.0.4",
"nativescript-ui-gauge": "^3.7.1",
"nativescript-ui-sidedrawer": "^4.3.1",
"reflect-metadata": "~0.1.8",
"rxjs": "^6.0.0",
"tns-core-modules": "^5.0.1",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.7.0-beta.0",
"@angular-devkit/core": "0.7.0-beta.0",
"@angular/cli": "6.1.0-beta.0",
"@angular/compiler-cli": "^6.0.3",
"@angular/language-service": "^6.0.3",
"@ngtools/webpack": "6.1.0-beta.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"clean-webpack-plugin": "~0.1.19",
"codelyzer": "~4.2.1",
"copy-webpack-plugin": "~4.5.1",
"css-loader": "~0.28.11",
"extract-text-webpack-plugin": "~3.0.2",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"nativescript-dev-sass": "^1.6.0",
"nativescript-dev-typescript": "^0.7.4",
"nativescript-dev-webpack": "^0.17.0",
"nativescript-worker-loader": "~0.9.0",
"protractor": "^5.4.0",
"raw-loader": "~0.5.1",
"resolve-url-loader": "~2.3.0",
"sass-loader": "~7.0.1",
"ts-node": "~5.0.1",
"tslint": "^5.11.0",
"typescript": "^2.7.2",
"uglifyjs-webpack-plugin": "~1.2.5",
"webpack": "~4.6.0",
"webpack-bundle-analyzer": "~2.13.0",
"webpack-cli": "~2.1.3",
"webpack-sources": "~1.1.0"
}
}

[realtica]

The same issue here, I tried to upgrade nativescript:
https://docs.nativescript.org/releases/upgrade-instructions
Now the tns run android --bundle works well, but tns run android --hmr do not thnows any error but doesn't work, this is frustrating.

[erkanarslan]

@realtica Same here. Running tns run android --hmr or tns run android --bundle --hmr builds and starts the application but any change in the code results in a refresh of the app.

[dtopuzov]

@realtica @erkanarslan

We had some issues with angular project that are fixed in latest versios of nativescript-dev-webpack:
https://github.com/NativeScript/nativescript-angular/issues/1564

Can you please re test with brand new project created with latest version of nativescript cli (it will automatically bring latest versions of all components like nativescript-dev-webpack).

If you are on angular project please also follow the steps in this wiki:
https://github.com/NativeScript/nativescript-angular/wiki/HMR

[DimitarTachev]

Closing due to inactivity.

[erkanarslan]

@dtopuzov @DimitarTachev I tested it with the latest version of nativescript-dev-webpack in my existing project. It still doesn't work. Page is still completely reloaded and worse part is that no change is transferred to the device. I need to re-run tns run ios --bundle --hmr to get changes. Can you reopen this issue?

[KristianDD]

Hi @erkanarslan ,
To use HMR with latest nativescript-dev-webpack:

1. Make sure you are using the latest version of the CLI tooling - npm i -g nativescript@latest
2. Follow strictly the steps described here for running HMR with NativeScript 5.2. They are different from the ones for NativeScript 5.0.

Make sure you removed the code to accept hot changes inside the entry module and update the webpack.config.js file by executing the ./node_modules/.bin/update-ns-webpack --configs --deps command as described in the Upgrade section.

If HMR is still not working as expected, please attach to your next reply a sample project with which we can reproduce and investigate the issue.

[erkanarslan]

I upgraded nativescript-dev-webpack from 0.19.2 to 0.20.0. I must note that npm i nativescript-dev-webpack does not install version 0.20.0 but 0.19.2. I had to manually change the version in the package.json file. Then, I followed the steps above and I can see the HMR logs in the console.

However, I get these errors and it doesn't work again:

CONSOLE INFO file:///app/vendor.js:117179:36: HMR: Checking for updates to the bundle with hmr hash 7561f6308a7b3adc7918. CONSOLE WARN file:///app/vendor.js:117180:36: HMR: Ignored an error while updating module ./main.ns.ts <accept-errored> CONSOLE WARN file:///app/vendor.js:117180:36: HMR: Error: Element for Ripple already registered. CONSOLE ERROR file:///app/vendor.js:117181:38: HMR: Cannot apply update with hmr hash 7561f6308a7b3adc7918. CONSOLE ERROR file:///app/vendor.js:117181:38: HMR: Element for Ripple already registered.

I call this code block before class definition in app.module.tns.ts file:
registerElement("Ripple", () => require("nativescript-ripple").Ripple); registerElement("Fab", () => require("nativescript-floatingactionbutton").Fab);
If I remove these, HMR works but I need these to make those plugins work. I believe that registerElement function is called in each HMR sync operation and it causes an error.

[vchimev]

Hey @erkanarslan,

could you register these elements in the main.tns.ts instead of app.module.tns.ts?

Thanks,

[vchimev]

I'm closing this as the original issue is outdated.

Please, upgrade to NativeScript 5.2 and let us know your feedback in a new issue.

Thank you,

[donny08]

@KristianDD. I followed all steps for HMR configuring, but still no hopes. I getting error:
JS: HMR: Checking for updates to the bundle with hmr hash 9b28f6ecb4e74643d329.
JS: HMR: Ignored an error while updating module ./main.ts
JS: HMR: Error: Element for PreviousNextView already registered.
JS: HMR: Cannot apply update with hmr hash 9b28f6ecb4e74643d329.
JS: HMR: Element for PreviousNextView already registered.

[ryanjorgensen]

Same as @donny08, any insight into this?

[prestopasto]

I had this issue with a non-shared Angular app. Registering them in main.ts solved it.