The example code in chap4 breaks with react-router-dom > @v5.2

The Switch component is no longer available and the compilation complains about this

Attempted import error: 'Switch' is not exported from 'react-router' (imported as 'Switch').

On Chapter 12, the component ThreadCard.tsx makes use of the following CSS classes:

• content-header
• link-txt
• username-header
• question

However, none of them can be found neither in ThreadCard.css nor in App.css

Dear Author,
There is an issue in the following snippet of code. I think there should be also GreetingState type declaration, otherwise it fails.

 React.Component<GreetingProps> {

    constructor(props: GreetingProps){

Issue:
Graphql package is not found while excuting command: "nodemon server.js"

Solution:
Install graphql package by running: "npm i graphql" before "nodemon server.js"

Hello everyone. I am the author of the book and wanted to clarify an item in Chapter 3. I gave an explanation about this that is very sparse and not really useful. So here's a somewhat more fleshed out example. Please look at the code below.

`globalThis.label = "outside";

function MyFunction() {
if (!this.label) this.label = "inside";
console.log("from function " + this.label);
}

MyFunction();
let test = new MyFunction();`

Firstly because we were using Node and not a browser the root object is not window but the Node Global Object called globalThis (or just global if you're not using TypeScript). Here's a rundown of what this code is doing.

1. In this code we first set a property of the globalThis object called label to the value "outside" to indicate where this property was set.
2. Subsequently we define a new function called MyFunction and inside it we first check for the this object's label property and set it to "inside" if it has no value.
3. Then we console.log the this.label's value.
4. And then finally we use the function in two ways: first we call it directly as a function and next we create an object instance called test by using the new keyword (which means we use the function as a constructor).

If you run this code you'll see that the first console message shows "from function outside" and the second shows "from function inside". A couple of points on this result.

1. The first result is happening because we are directly calling the function as a function, as opposed to instantiating it as an object. Therefore the internal this is the globalThis Node object. And therefore the resulting label value is "outside"
2. However in the second line we are instantiating the MyFunction as an object. Therefore the function's internal this is the test variable. And since the test variable was newly declared it would not have a value for label and therefore the label is set to "inside" and displayed as such.

Now just one final point. If in the MyFunction definition, just above the console.log statement, you were to add the line let label = "neither" it would not affect the results of the console.log at all. You may already be aware of why this is the case, but the reason why it does not affect the result is that the let label statement is creating a new variable as part of the function scope--not the this keyword. In other words the squiggly brackets indicate the lifetime of variables within the brackets and not the members of the this object instance.

I hope this is a better explanation.

Hi there.

I don't know if this problem only appears to me, but I would like to comment it anyway...

In functionGeneric.ts in chapter 2 the concept of generics is introduced. The first half of the code is introduced like this:

function getLength<T>(arg: T): number {
  if(arg.hasOwnProperty("length")) {
    return arg["length"];
  }
  return 0;
}

console.log(getLength<number>(22));
console.log(getLength("Hello world."));

So far so good.

But in the second part, when I have commented all the previous code as instructed and enter the following one...

interface HasLength {
  length: number;
}

function getLength<T extends HasLength>(arg: T): number {
  return arg.length;
}

console.log(getLength<number>(22));
console.log(getLength("Hello world."));

... then I get this error:

Type 'number' does not satisfy the constraint 'HasLength'. ts(2344)

Maybe I'm guessing but.... Is it possible that some change during Typescript 3.8 makes it impossible to implement an interface in this way now? Or maybe I'm missing something?

By the way, I'm using VScode in Linux Mint 20.1 with Typescript v3.8.3 and node v14.16.1 installed globally (both).

Dear Author,
In Chapter 6: Mocking with jest.fn I think it is better to update the snippet with the following:

return userByName ? userByName.name : "Unknown name";

Otherwise when it renders the HTML shows [Objec object] for known names and undefined for unknowns.

I 'am currently stuck at chapter 12 with this huge number of errors and because of my limited knowledge about slate and overall typescript I couldn't fix any of them so I'll appreciate some help and I'm sure this will help other future readers.

P.S: I didn't edit one line of code from how it is in the repo.

screenshot's :






source code from the repo

/Users/daz/Code/_learn/fullstack-react-typescript-node/06/ejected-app/src/DisplayText.tsx
TypeScript error in /Users/daz/Code/_learn/fullstack-react-typescript-node/06/ejected-app/src/DisplayText.tsx(46,44):
Type '(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void' is not assignable to type 'MouseEventHandler<HTMLButtonElement>'.
  Types of parameters 'e' and 'event' are incompatible.
    Type 'MouseEvent<HTMLButtonElement, MouseEvent>' is not assignable to type 'MouseEvent<HTMLButtonElement, MouseEvent<Element, MouseEvent>>'.
      Type 'MouseEvent' is missing the following properties from type 'MouseEvent<Element, MouseEvent>': nativeEvent, isDefaultPrevented, isPropagationStopped, persist  TS2322

    44 | 
    45 |       <div>
  > 46 |         <button data-testid="input-submit" onClick={onClickShowMsg}>
       |                                            ^
    47 |           Show Message
    48 |         </button>
    49 |       </div>

Hi, I encountered the above error, while following the page 184 example verbatim.

Managed to resolve it, thanks to this answer, but don't understand why {onClickShowMsg as any} is required. Could I get further guidance or a pointer to documentation for this?

Many thanks in advance.

when trying to click on one of the left menu categories it changes for a second and return to the Latest
Note: i have the same code as the source code

Dear author, please check the next line.

I had to change this line:

const { userid } = useParams();

To this format, in order to work for me:

const { userid } = useParams<{ userid: string }>();

pubsub is not a part of GqlContext

This project is incompatible with the latest version of node.

I had to target node version 16 to get chapter 4 to work. Please update read.me.

Working on the expressapp.mjs :
The CURL command for the terminal is not working anymore.

we set up all the middleware -> then we set up a route object and set up the middleware routes -> then we want to test our POST method with curl, but its not working as intended.

This is the curl code we should use:

curl --header "Content-Type: application/json" --request POST
 --data `{"userid":"1","message":"hello"}` "http://localhost:8000/c"

this error message in the terminal output:

userid:1: command not found
curl: no URL specified!
curl: try 'curl --help' or 'curl --manual' for more information

note: im running my express Node server on another terminal. The CURL worked for a previous section of the chapter where I also had to test a POST url request.