Ionic-app-scripts: Bug: Ionic serve failed to load (typescript 0.0.47 and 0.0.48)

[jgw96]

_From @thinktinker on December 20, 2016 10:52_

Everytime I save a page, the page does not refresh in the web browser (ionic serve -all)

Looking at my terminal console, I get the following error.

UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 5): TypeError: Cannot read property 'send' of undefined

I'm using ionic 2.1.8 (typescript 0.0.47), node 6.9.1, running on ubuntu 16.04.

_Copied from original issue: driftyco/ionic#9723_

[jgw96]

_From @AndreasGassmann on December 20, 2016 16:0_

It looks like you have an unhandled promise rejection in your code. Try looking for the usage of the .send function and see if you are missing a .catch(console.log) on that promise.

[jgw96]

_From @thinktinker on December 20, 2016 16:33_

It was a fresh project downloaded (ionic start myApp blank --v2 --ts), and the only thing I changed was the home.html file with some basic text.

What I observed is that current fresh 'blank' projects loaded uses the (0.0.47 typescript), which all this while whenever I download a new project previously, the console prompts me I'm using 0.0.45 typescript, which runs perfectly well on my current install of ionic CLI 2.1.8, with nodejs 6.9.1.

Could it be possible that the starter files using typesript 0.0.47 on the repo has bugs or are broken, or incompatible with my current ionic + nodejs install?

Appreciate further advise here. Thank you.

[jgw96]

_From @jayeshanandani on December 20, 2016 17:59_

Could you please update to ionic-app-scripts version 0.0.48 and probably also share ionic info output.

[jgw96]

_From @thinktinker on December 20, 2016 18:18_

The problem persists though I installed the latest app-script (0.0.48). When I update home.html, the error in bold further below shows up. Any advise?

My ionic info

Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.48
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.9.1
Xcode version: Not installed

When I run ionic serve and update home.html

ionic-hello-world@ ionic:serve /build/myapp
ionic-app-scripts serve

[18:12:30] ionic-app-scripts 0.0.48
[18:12:34] watch started ...
[18:12:34] build dev started ...
[18:12:34] clean started ...
[18:12:34] clean finished in 35 ms
[18:12:34] copy started ...
[18:12:34] transpile started ...
[18:13:03] transpile finished in 28.44 s
[18:13:03] webpack started ...
[18:13:04] copy finished in 29.49 s
[18:13:15] webpack finished in 12.10 s
[18:13:15] sass started ...
[18:13:17] sass finished in 2.72 s
[18:13:17] build dev finished in 43.37 s
[18:13:18] watch ready in 43.65 s
[18:13:18] dev server running: http://localhost:8100/

[18:14:03] build started ...
(node:67) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Cannot read property 'send' of undefined

[jgw96]

_From @jayeshanandani on December 20, 2016 18:21_

Which version of typescript are you using? Also please ensure you have latest ionic cli installed.

npm install -g ionic@latest

[jgw96]

_From @thinktinker on December 20, 2016 18:26_

Within my package.json dependencies, it states "typescript": "2.0.9".
I'm practically working on brand new 'blank project', and only started inputing some text in the home.html file.
What is the current version of CLI now? My info says I'm using Ionic CLI Version: 2.1.8.
Does either of the above two break the ionic serve process?

[jgw96]

_From @thinktinker on December 20, 2016 18:39_

Now everything just broke Having done the following:

1. npm install @ionic/app-scripts@latest
2. npm install -g ionic/latest

Nothing compiles now, with the below output error:
There was an error serving your Ionic application: Error: Cannot find module 'cross-spawn-async'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.runIonicScript (/usr/lib/node_modules/ionic/lib/utils/npmScripts.js:22:15)
at /usr/lib/node_modules/ionic/lib/ionic/serve.js:71:27
at _fulfilled (/usr/lib/node_modules/ionic/node_modules/q/q.js:787:54)
at self.promiseDispatch.done (/usr/lib/node_modules/ionic/node_modules/q/q.js:816:30)
at Promise.promise.promiseDispatch (/usr/lib/node_modules/ionic/node_modules/q/q.js:749:13)
at /usr/lib/node_modules/ionic/node_modules/q/q.js:557:44

[jgw96]

_From @jayeshanandani on December 20, 2016 18:45_

@thinktinker : seems like your ionic latest update was not installed successfully. Please try running command npm install -g ionic@latest and ensure it runs fully. Also delete node_modules from project folder and re-run npm install in project.

[jgw96]

_From @thinktinker on December 21, 2016 5:58_

Have been doing this for one whole night.
I'm certain that the new blank starter projects have dependencies that do not work with my current ionic set up - which is an older set up (below). It's a shame. Shouldn't there be some backward compatibility of the starter projects with previous RCs of ionic 2?
This is my current set up
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.48
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.9.1
Xcode version: Not installed

[thinktinker]

Anyone has any feedbac? Receiving this error when trying to do an ionic serve, only to receive the below error:

UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 5): TypeError: Cannot read property 'send' of undefined

Chanced upon this stack overflow request bearing the same issue, but a clear solution wasn't provided:
http://stackoverflow.com/questions/41241152/ionic-2-serve-error-on-code-change-unhandledpromiserejectionwarning

[sidjoshi001]

hey @thinktinker I have same issue, did u find any solutions..!!

[sidjoshi001]

I have created new project but still not working
also tried
npm install @ionic/app-scripts@latest
npm install -g ionic
npm install -g cordova

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.48
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.9.2
Xcode version: Not installed

but facing same issue..!!

[thinktinker]

Yup. I've also updated my configurations like yours, but face the same problem.
This problem seems to be affecting quite a number of folks.
Are you using docker or operating system (Mac / Win) to run your code?

[sidjoshi001]

using Linux (ubuntu 16.04) after update my app-script version m facing this issue..!!!

[thinktinker]

Any folks here who are using 0.0.48 Typescript and are working fine with their ionic upgrades?
I did a complete fresh install of the latest ionic on Ubuntu too, but no luck.
Appreciate some advise here.

[sidjoshi001]

I recently found that app-script with 0.0.45 has no issue..!!

someone help here with 0.0.48..!! (app-script)

[thinktinker]

Yup. if you refer to my previous comments, 0.0.45 works fine.
So far I've tested typescript 0.0.47 and 0.0.48; these two versions broke the camel's back. =(

[coreymcmahon]

Also experiencing this. Pretty serious breakage. Livereload doesn't work for 0.0.47 - 0.0.48, reverting to 0.0.45 gives us a white screen of death (possibly because the rest of the codebase has been upgraded to RC4).

[thinktinker]

Agree with you:
1. Some 'livereload' issue was introduced in the 0.0.47 and 0.0.48 update and it isn't fixed.
1.1. Even when I put together a brand new setup below, the 'livereload' didn't work as well:

• Ionic Framework Version: 2.0.0-rc.4
• Ionic CLI Version: 2.1.17
• Ionic App Lib Version: 2.1.7
• Ionic App Scripts Version: 0.0.48

2. The templates' codebase (e.g. blank / sidemenu) has been updated and will not render in older set ups of ionic.

Hopefully this 'livereload' issue is fixed.
@coreymcmahon, you know of any way to start a new project from an older template codebase?

[coreymcmahon]

ionic serve works, but livereload doesn't.

$ ionic info

Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.48
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: OS X El Capitan
Node Version: v7.2.1
Xcode version: Xcode 8.1 Build version 8B62

Only fix seems to reverting everything to <= RC3 and using an older version of ionic-app-scripts

[thinktinker]

Ionic serve does work the first time only, as after you make and save a change, the below error will rear its ugly head:
UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 5): TypeError: Cannot read property 'send' of undefined

@coreymcmahon, what are the npm commands to install an older RC and typscript?

[coreymcmahon]

@thinktinker You need to revert your package.json file to the RC3 version and then run npm install.

See: https://github.com/driftyco/ionic/blob/master/CHANGELOG.md

[danbucholtz]

Try Node 6.x, I have heard of people seeing that issue with Node 7. Node 7 is still brand new and many libs haven't been updated for it yet.

Thanks,
Dan

[thinktinker]

@danbucholtz
My config uses node 6.9.2, yet the problem exists. Please advise.
My system information:
Cordova CLI: 6.4.0
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.9.2
Xcode version: Not installed

[danbucholtz]

@thinktinker,

Ahh. We have seen reports of some issues on Linux too. Truthfully, we need to start testing on Linux. We test on Mac and Windows. Expect to see some improvements here in the next week or so. I'll spend a day doing some testing on Linux.

Thanks,
Dan

[thinktinker]

Thanks @danbucholtz.

Here, I'll cite the case scenarios in point form for the situation that has led to this error:
UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 5): TypeError: Cannot read property 'send' of undefined

1. I've tested against ubuntu 16.04 and openjdk (Linux 4.4) based on the ionic config below. My system information as follows for both OS:

• Cordova CLI: 6.4.0
• Ionic CLI Version: 2.1.17
• Ionic App Lib Version: 2.1.7
• ios-deploy version: Not installed
• ios-sim version: Not installed
• OS: Linux 4.4
• Node Version: v6.9.2
• Xcode version: Not installed**

1. Based on the above config:

Scenario No. 1: When I run my old projects based on RC 3 and TypeScript 0.0.45, 'ionic serve' will work. Any change I make and update, no error. Browser refreshes also reflects updates successfully.

Scenario No. 2: When I start a fresh project based on RC 4 and TypeScript 0.0.47 or 0.0.48, 'ionic serve' WON'T work. At this juncture, when I make and update, the UnhandledPromiseRejectionWarning log shows up, and browser refreshes does not show updates.

@coreymcmahon has also pointed out that the templates are now running based on RC4 and TSC 0.0.47 or greater. They didn't work on Linux.

Thanks for the support in advance and looking forward to some positive news.

[tomsun]

Same issue here

(with Ionic's default starter app, within the node:6 docker image, with either stock 0.0.47 or after an upgrade to 0.0.48)

(node:194) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Cannot read property 'send' of undefined

Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.48
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.9.1
Xcode version: Not installed

[ralfthewise]

Here is a stacktrace of the error:

TypeError: Cannot read property 'send' of undefined
    at drainMessageQueue (./node_modules/@ionic/app-scripts/dist/dev-server/notification-server.js:20:34)
    at queueMessageSend (./node_modules/@ionic/app-scripts/dist/dev-server/notification-server.js:13:9)
    at EventEmitter.<anonymous> (./node_modules/@ionic/app-scripts/dist/dev-server/notification-server.js:49:9)
    at emitOne (events.js:96:13)
    at EventEmitter.emit (events.js:188:7)
    at Object.emit (./node_modules/@ionic/app-scripts/dist/util/events.js:12:21)
    at ./node_modules/@ionic/app-scripts/dist/build.js:90:18
    at Object.buildUpdate (./node_modules/@ionic/app-scripts/dist/build.js:83:12)
    at Timeout._onTimeout (./node_modules/@ionic/app-scripts/dist/watch.js:160:27)
    at ontimeout (timers.js:365:14)

[ralfthewise]

And it looks like if you make sure that the browser livereload websocket connection is established (just load the app in a browser window) then the error doesn't happen.

[sidjoshi001]

@ralfthewise Thanks for suggestion, do u mean run live reload with serve ?

[ralfthewise]

Yes - I mean you can do the following:

• Issue the command ionic serve
• Wait until you see the message about dev server running: http://localhost:8100/
• Open the app in a browser at http://localhost:8100/
• Make a change to a typescript/javascript file in your app and note that it gets built and re-loaded in the browser

However, that's only marginally helpful since if you save a typescript/javascript file that has errors, things get broken and you will have to stop and re-run ionic serve

[tomsun]

@ralfthewise thanks! ensuring all three devserver ports are usable and having a browser listening, did the trick for me too.

Firefox console did show a connection error, so it is not 100% non-obvious. Would be nice if livereload & co were progressive enhancements though, rather than something that break the workflow.

(I'm using Docker and I did actually do port mapping of both the http port and the livereload port, but not for the logger port... I.e not being able to establish a connection on the logger port also triggers the same or a similar promise rejection. )

[thinktinker]

@tomsun ,
Normally, To run my project in a browser, I send the command 'ionic serve'.
Can you advise me on:

1. How to run a ionic serve command with the option of 'livereload'?
2. To run in docker, what is the 3rd option to map for the livereload port? Can you provide an example of the 'run' command?
   So far, my mapping only includes 8100:8100 and 35729:35729, similar to the example below:
   sudo docker run -ti -p 8100:8100 -p 35729:35729 -v /path/to/your/ionic-project/:/myApp /bin/bash

[tomsun]

@thinktinker

1. Think live reload is enabled by default

2. In the starter templates, package.json has a scripts entry:
   "ionic:serve": "ionic-app-scripts serve"
   I updated mine to use a project-specific set of ports:
   "ionic:serve": "ionic-app-scripts serve --port 7812 --livereload-port 7813 --dev-logger-port 7814"
   ...mostly to avoid collisions if I ever were to watch multiple Ionic projects at once - not that it happens very often... ionic serve seems to be an alias for npm run ionic:serve: both of them pick up the custom port parameters from package.json. Alternatively, ionic serve --port 7812 --livereload-port 7813 --dev-logger-port 7814 (without editing package.json) seems to work fine too (ionic --help only documents the first two though).

Anyhow, the default dev-logger-port is 53703 - so you could probably just add -p 53703:53703 to your docker run recipe and be done, if dev-logger-port not being mapped is the issue in your case too.

[thinktinker]

You are a saviour @tomsun!
Within my ubuntu, saving my file now allows me to preview the changes without UnhandledPromiseRejection errors! Even the web socket 'error' has disappeared. I can now continue with my works!

Seems like this workaround requires direct instructions on the ports to use (within package.json), which is queer as it wasn't meant to be in previous ionic templates. So which port(s) is the exact culprit to incur the error? Can the dev folks advise on this?

Also, to-date, I've not come across any suggestion where:

1. One can perform direct port mapping for all devserver ports in the package.json; and
2. Issue ionic serve via npm run ionic:serve
   Is there any documentation on the above somewhere?

Nonetheless, thanks for providing this workaround that works. Hope it saves many other folks out there!

PS: Learnt something new and crossing my fingers the next ionic-app-script revision resolves this issue. Meant time, I'm gonna stick with using this workaround for sometime!

Thanks millions @tomsun !

[fiznool]

Thanks @ralfthewise for that stack trace, managed to fix this by guarding against an undefined wsServer. The PR above fixes the issue.

Until then, my fix is to make sure I have a browser opened with the app loaded, then this error will not occur.

[danbucholtz]

This should be fixed now. Will be published tomorrow in 0.0.49.

Please let me know if it's not.

Thanks,
Dan

[thinktinker]

Thanks @danbucholtz !