Relief for your TypeScript/eslint pain

[DarrenSem]

Hi folks, excellent course overall, but a handful of times I encountered an error or "Problem" that was often TypeScript or eslint in VSC preventing my code from compiling. 🤦‍♂️

So each time that I had to spend some time figuring out a workaround, I also posted it to my LinkedIn profile in case someone else might encounter the same or similar problem.

Many lessons learned along the way!

But now that I completed this course, and about to move on to new adventures, I thought hey why not put them all in one place, like... here in the Issues section on GitHub -- just to be helpful to any future participant who takes this MongoDB-NodeJS-React training.

So here you go. HTH. 🕊

[DarrenSem]

https://www.linkedin.com/posts/darrensem_351-if-anybody-sees-this-typescript-error-activity-7122383948780892161-3yIl

Video 3.7 ("React’s key for items in a list") @ 3:51 if anybody sees this TypeScript error/Problem... "Property 'categoryName' does not exist on type 'object'." ...then you can resolve it by being more explicit in the signature of your function's "React.FC" <{ object }>.

If this fails to compile:

const ContestPreview: React.FC<{ contest: object }> = ({ contest }) => {

Then try this instead:

const ContestPreview: React.FC<{ contest: { categoryName: string, contestName: string } }> = ({ contest }) => {

BUT, good news: it seems newer versions of TypeScript or eslint might be more "forgiving" -- because, for me, no error shows up when I simply do this:

const ContestPreview = ({ contest }) => {

^ no : React.FC needed, and without having to resort to adding : any.

( or this may be a result of my devDependencies having a handful of @types/foobar -- eslint + react + react-dom -- and also @typescript-eslint/eslint-plugin and @typescript-eslint/parser 🤷‍♂️ )

[DarrenSem]

https://www.linkedin.com/posts/darrensem_234-fyi-if-anybody-encounters-eslint-issues-activity-7122654544051781632-vYcp

Video 3.7 ("Sharing data between server and client") @ 2:34 FYI: if anybody encounters eslint issues with index.ejs, VSC showing a handful of Problems/errors "Expression expected" when you add this script line...

<script>window.initialData = <%- JSON.stringify(initialData) -%>;</script>

...then switch to this syntax, to make those eslint "Problems" go away:

<script>window.initialData = JSON.parse('<%- JSON.stringify(initialData) -%>');</script> <<< the json string = '{"contests": [...]]}'

EDIT: However, doing this "workaround" makes it so the next video/step fails -- due to ' apostrophe and CR/LF in the data -- so I guess just do the original thing and ignore the warnings, and just forget that you ever saw this post... :sigh:

[DarrenSem]

https://www.linkedin.com/posts/darrensem_242-while-trying-to-display-the-clicked-activity-7124484382861496320-eGZR

Video 4.3 ("Fetching data after navigating to a new view") @ 2:42 While trying to display the clicked Contest, for anyone else whose TypeScript/eslint settings in VSC keeps giving them this terminal error...

Unable to compile TypeScript: src/components/contest.tsx(31,37): error TS18048: 'contest' is possibly 'undefined'.

...try this workaround I used: Inside this JSX line...

<div className="description">{ contest.description }</div>

...replace the the JavaScript with this...

<div className="description">{ Object(contest).description }</div>

PS: yes it STILL fails to compile with this: <div className="description">{ contest?.description }</div>.

PPS: And sadly it even fails with this: <div className="description">{ contest && contest.description }</div> error TS2339: Property 'description' does not exist on type 'never'.

UPDATE: since in the next video this becomes annoying to do for every property, EASIER workaround is to just add any type to the useState line: const [contest, setContest] = useState<any>() instead of const [contest, setContest] = useState(). 🤦‍♂️

[DarrenSem]

https://www.linkedin.com/posts/darrensem_044-tipsolution-to-a-frustrating-problem-activity-7124939079376412672-Rg-M

Video 4.5 ("Server-side rendering of a custom path") @ 0:44 Tip/Solution to a frustrating problem re. the [Array] of "middleware" (in this case "string paths"), WARNING:

While the video's code server.get(['/parent-path/', '/parent-path/child-path/:varname'] does not seem to care about ORDER you provide them, server.use() DOES care!

🤦‍♂️ I discovered this because my code server.use(["/", "/contest/:contestId"] resulted in request.params ALWAYS being { "contestId": undefined } 😲

But changing it to server.use(["/contest/:contestId", "/"] resulted in request.params being { "contestId": "the-correct-value" } 😌

So... perhaps as a Best Practices habit just always make sure you list the lower-level-paths before top-level. 🧠

[DarrenSem]

https://www.linkedin.com/posts/darrensem_103-bug-fix-if-you-are-stuck-unable-to-activity-7125245389208702977-PrGl

Video 5.4 ("Using an API endpoint to update data") @ 1:03 BUG "fix" if you are STUCK unable to run with the $push: { "names": newNameObject } update property for .findOneAndUpdate()!

I was getting this blocking error: 🧱 Unable to compile TypeScript: src/server/api-router.ts: error TS2322: Type '{ id: string; name: any; timestamp: string; }' is not assignable to type 'never'.

My guess is that, due to the : after $push, TypeScript seems to think whatever is to the right must be a type -- the shape of an object. 🤦‍♂️

But LUCKILY, JavaScript lets you dynamically create a propertyName, so this lets you solve the problem:

...Instead of this: $push: { "names": newNameObject }

...use this syntax: [ "$push" + "" ]: { "names": newNameObject } 😌

^ The TRICK is the ending + "" in between the [propertyName] -- because the error does not go away with ["$push"]: { "names": newNameObject } ( or even if you set an earlier const PUSH = "$push$"; and then try [PUSH]: { "names": newNameObject } 🙄 )

Hopefully this be helpful to anyone else blocked by this in their IDE/TypeScript/eslint!

[DarrenSem]

Also, not quite a code workaround, just a new URL location:

https://www.linkedin.com/posts/darrensem_158-for-those-who-got-404-when-trying-activity-7119751527837175808-z9yt

Video 2.1 ("Why React?") @ 1:58 For those who got 404 when trying to access the "Complete Introduction to React" article: Luckily, it is archived @ https://lnkd.in/gCjJkxT8 ( https://web.archive.org/web/20230326023918/https://eng.galoy.io/react-intro/ )