Error on the Add Contact worker

[FarzanKh]

modern-full-stack-development/mailbag/server/src/Contacts.ts

Line 72 in 085ddc0

public addContact(inContact: IContact): Promise<IContact> {

I get an error for the add contact worker. Does anybody know what the issue might be?
I take all the steps based on the textbook and source code, but the error still persist.
You can see the error on this screenshot:
https://ibb.co/PDX2kYv

[guidefari]

same here, even the repo's code produces the same error.

[fzammetti]

Hi... can you tell me what IDE/editor you're using? I'm not seeing such an error in IntelliJ IDEA.

Also, is the code compiling and running for you from a CLI? For me, it is, and it seems to run just fine.

[FarzanKh]

Hi.. I am using VS Code. Could that be the reason I'm getting an error?

[FarzanKh]

I just tried with IntelliJ IDEA and I got the same error. Screenshots:
https://ibb.co/DDfJPRZ
https://ibb.co/prN4PRW

[fzammetti]

Hmm, interesting. I don't really use VSCode myself, but I'm using IDEA too and not seeing the same... I'm sure there's some inspection setting difference or extension or something... but, ultimately it shouldn't matter much if it's building and working from the command line. The projects are definitely set up not for any specific IDE or editor, the expectation is that it's built and run from the command line. There, I'm able to build and run both client and server without problems. Are you able to do the same?

[FarzanKh]

By running from the command line you mean typing the curl commands? When I type curl localhost/mailboxes as an example, I get: https://ibb.co/7JnrsyN

[fzammetti]

No, sorry, I mean doing:

npm build

...in the client directory to build the client, then...

npm develop

...in the server directory to build and start the server. Note that you'll need two separate command prompt windows since both steps monitor for changes after doing the build.

I can try and figure out how to resolve what the IDE is showing you, but I'd like to at least make sure you can build and run the project so at least you aren't stuck first.

[guidefari]

It should be one of the node modules that's an issue, I ended up resorting to cloning the original server folder, and that worked just fine.

[FarzanKh]

I tried both commands, but I couldn't run the server.
Can you please take a look at this screenshot:
https://ibb.co/Y0TZrdL

When I clone the repo, do I need to install all the NPM modules again (node mailer for example)?

[guidefari]

yes, after cloning the repo, cd to the client folder and run npm i. run the same command in the server directory

[FarzanKh]

Okay I ran npm i first in the client directory and then in the server directory. I think it installed all the dependencies.
After that I go to the client dir and type npm build and then in the server dir type npm develop, but nothing happens?
Is it going to launch the browser?

[fzammetti]

Sorry, I didn't reply sooner, been battling an illness.

You may have worked this out already, but if not, no, it doesn't launch the browser automatically. The server starts up, and then you manually have to access the URL mentioned in the book.

To give you the entire flow, start to finish, starting with a fresh clone of the repo (and assuming Windows):

1. Open a command prompt window
2. In the client directory, execute npm install followed by npm run build
3. Open another separate command prompt window
4. In the server directory, execute npm install followed by npm run dev
5. Access the app at localhost:8080

Note that both windows must remain open, because they are still executing, watching for changes in the code. You have to remember as well that you essentially have two separate projects here, that's why you have to install dependencies in both and run both in separate windows. However, note that if you don't intend to change the client code then you can close that window (or, in fact, you can do everything in one window), The server references the client project to serve the client to the browser, and once it's built then that's all that has to happen, but the project is set up so that you can make changes to it and "instantly" (with a browser refresh) see the changes.

And, of course, make sure you update serverInfo.json with your SMTP/POP3 info before starting the server or things won't work.

[FarzanKh]

I hope all is well now. Actually I haven't had a chance to run it sooner either. I am going to test it now again.
Just a quick question... I can update serverInfo.json with any information right? I mean should I use particular port number or user/pass or anything would work?

Thanks

[fzammetti]

Yes, thanks, feeling much better now :)

You would need to put valid info for some email server, but the values themselves could be anything. If it's not valid info though you'll find that you won't get past the initial please wait (it's fetching mailboxes, if memory serves) and you'll see some errors in the console for the server.

Oh, and I just noticed I made a mistake earlier: this code used IMAP, not POP3. I haven't looked at it in a while and I forgot that.

[FarzanKh]

Hi, I followed the steps one by one, but when I ran npm run dev in the server directory, my app crashed and here's the log and screenshots:
https://kopy.io/r2oET
https://ibb.co/56nzWfM
https://ibb.co/HV75h5S
Local terminal is for client and Local(2) is for server

Is my ServerInfo.json correct?

[fzammetti]

Hi,

I feel like something else is wrong based on the errors you're seeing, but I'm not sure what frankly. However, the values you have in that file definitely don't appear valid to me. They must be valid values for your own SMTP and IMAP servers. You'll have to find out what they are. If you use Gmail, for example, you can get that info here:

https://support.google.com/mail/answer/7126229?hl=en

Otherwise, you'll have to find that information out from wherever your email is hosted (or you could run your own mail server if you like, but that would be completely up to you to set up).

Once that's done, if you're still unable to start the app then like I said, I suspect something else may be wrong, but it isn't clear to me what it is... I just see some things there that don't look right (for example, you shouldn't be seeing in the second screenshot). It almost seems like maybe the compile step isn't working actually, but I can't see enough details to tell why. I know I tried this again last night and everything worked, so I'm kind of at a loss at the moment... but one step at a time, let's get the config part right first and go from there.

[FarzanKh]

Hi,
I changed my serverInfo.json file to the following format:
https://kopy.io/7Az4K
https://ibb.co/Scr7gSh

And then I followed all the steps. I created this screen recording of my errors (feel free to skip ahead and watch from 4:05):
https://uci.zoom.us/rec/share/TOCfL7zwEGfweeDMj_laKMO-mc_l_X_FBK7Ia1OpYRG0BG4yATmOr0dWNaGW1U6e.bsQnQAIwQ-sDQNQ5

[fzammetti]

Hi,

Ok, so, I watched the video and the good news is I don't see that you're doing anything wrong, so it's not you :)

The problem is that the build step for both the client and the server isn't working. All those errors you see fly by when you execute the npm run build command for the client and npm run dev for the server, those shouldn't be happening. I just did a fresh pull of the repo and followed the same steps exactly and it works for me, no errors in either case, and the app runs correctly, so it wouldn't appear to be a code-level problem.

So, that tells me that there's something on your machine that is conflicting in some way. Unfortunately, I don't know what it is, so we'll have to try and solve the mystery step by step.

Let's start with this... execute the following command at a command prompt:

npm -g ls --depth=0

That will list the packages installed globally, but just the top-level ones. Let me know what you see. For reference, on my machine, I only see cordova, eslint, gatsby-cli, npm, and npm-check-updates. My first GUESS is that you maybe have an older version of Typescript, or maybe something else, installed globally, and it's conflicting with what's installed locally in the two mailbag projects. If you do see anything installed, and it's not something you know you need, try to remove it (npm uninstall command), and ideally don't have -anything- installed globally (hopefully it's obvious, but don't try to uninstall npm itself!)

Also, let me know what version of both npm and Node you have installed (node --version and npm --version will give you that info). I have the latest LTS versions installed currently (14.5.0 for Node and 6.14.8 for NPM), and I tested it with the latest 12.x LTS version too and it works in both cases for me. I would suggest updating Node to the latest LTS version if you aren't there already so that we're on the same page, just to eliminate some possibilities.

Once all that's done, do a fresh pull of the repo and try everything again, see what happens, and let me know.

Thanks,
Frank

[FarzanKh]

https://ibb.co/W3xc1v5
https://ibb.co/pWFTKY0

I updated node and npm both. I got the same error.

[fzammetti]

Ok, what about the global packages?

[FarzanKh]

You mean npm -g ls --depth=0 ? It's the first link above. I didn't take a screenshot of the client directory as it is very long.

[fzammetti]

Ah, sorry, I clicked the links on mobile and I guess maybe I tapped the same one twice and so didn't see the first one. Ok, anyway, none of them SEEM like they should be causing any trouble... however, to be safe, you may want to try uninstalling them all and see if that helps. I doubt it will though.

The only other thought I have is have you tried this from a plain command window rather than the terminal tab in VSCode? It would surprise me, but I guess maybe it's POSSIBLE there's something about the terminal that's different from a command window? The tests I did were in command windows, which is what made me think of this.