Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Express Basics Serving Static Files in Express Merging the Design Files

josephweiss2
josephweiss2
7,409 Points

Getting a error after setting up the whole app now

what does this error mean? i went through few times the video and followed each thing but still comes up this error:

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client at new NodeError (node:internal/errors:393:5) at ServerResponse.setHeader (node:http_outgoing:644:11) at ServerResponse.header (C:\Users-------\flashcards\node_modules\express\lib\response.js:794:10) at ServerResponse.send (C:\Users-------\flashcards\node_modules\express\lib\response.js:174:12) at done (C:\Users-------\flashcards\node_modules\express\lib\response.js:1035:10) at exports.renderFile (C:\Users-------\flashcards\node_modules\pug\lib\index.js:448:12) at exports._express [as engine] (C:\Users-------\flashcards\node_modules\pug\lib\index.js:493:11) at View.render (C:\Users-------\flashcards\node_modules\express\lib\view.js:135:8) at tryRender (C:\Users-------\flashcards\node_modules\express\lib\application.js:657:10) at Function.render (C:\Users-------\flashcards\node_modules\express\lib\application.js:609:3)

Bella Bradbury
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Bella Bradbury
Front End Web Development Techdegree Graduate 32,790 Points

The error you're facing is most likely due to improper asynchronous code. To be able to better assist you, could you please attach a snapshot of your workspace/ attach your code?

josephweiss2
josephweiss2
7,409 Points

Hi Bella Bradbury, thanks for trying to help me!

Here is a link with a zip with my full app in it please if you can help me with it, Thanks

https://drive.google.com/file/d/1LPK-0Y7-t5FaaLcp_PZtt4Dxyd1RZ6TF/view?usp=share_link

josephweiss2
josephweiss2
7,409 Points

can someone help me with it?

1 Answer

Bella Bradbury
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Bella Bradbury
Front End Web Development Techdegree Graduate 32,790 Points

To finally help you with this, it all comes down to one word. It's so crazy how just one little error can cause such a wild goose chase! Let me walk you through how I found this error:

  1. Google
    • I googled the error code and found this stackoverflow which led me to believe there might be a problem with one of the res.redirect()s.
  2. Identifying when the error occurs while navigating the app
    • By taking note of every time the error was being thrown, I realized it was every time a card was being navigated to. This lead me to believe the problem is probably with a route in the cards.js file because:
    • The error was thrown on card navigation, so it is happening whenever the route is changing.
    • It's happening only in relation to the cards and cards.js is where all of those routes are written. (Great job with code organization by the way!)
  3. More research!
    • I evaluated your code and realized that one of your res.redirect()s had return in front and one did not, meaning one of your code blocks were finished and the other could be left open potentially.
    • Adding the return piece of code will ensure it runs exactly as expected, whereas not including it could leave it a little more wiggle room.
    • I then did some more googling about return res.redirect() and found this stackoverflow which isn't the best article ever, but it details your same code structure. (There are definitely more instances you could find of this if you google "return res.redirect" if this specific one doesn't speak to you)
  4. Implemented a potential solution based on my research SOLUTION BELOW
    • I decided to change line 18 in cards.js to be a return statement and ran the app.
    • In cards.js line 18 now reads in full as:
    return res.redirect(`/cards/${id}?side=question`);

Now we test the app!

  • After changing line 18 to be a return statement, I then went through each route where an error was previously thrown and checked to make sure that no errors occurred now.
  • I also took the opportunity to check that the rest of the app is still functioning as expected.

And voila! Your app should now work as intended and not throw any errors. You did a great job of following along with the lesson and I truly thank you for your patience while waiting for an answer to this minor fix. Please let my know if you have any further questions! I'm keeping my eye on this discussion so that you don't have to wait weeks for another answer :)

josephweiss2
josephweiss2
7,409 Points

Wow!! "Bella Bradbury" thank you very much for this solution, I didn't realise that one res.redirect has a return and the other one not, It helped. Thanks

Bella Bradbury
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Bella Bradbury
Front End Web Development Techdegree Graduate 32,790 Points

Of course! That's why it can be so valuable to have someone else look at your code. I can't count the number of times my app hasn't worked because of a spelling error that someone else has caught :)

If you're satisfied with my answer you can go ahead and click "best answer" to close out this discussion. It's just a way of letting others know that this question is resolved, this discussion will still be available!