Chapter 8 Interacting with a Server

React Programming
1

Chapter 8 discussion

2

In Section 8.1, started up the code-cafe-backend server successfully, but got this “no fixes available” error from eslint when I tried to check in code. Haven’t changed anything in the code, any tips on what is causing the error and how to fix it?

husky > pre-commit (node v18.7.0)

rest-api@0.0.0 lint
eslint . --max-warnings=0

resources/react-resources/code-cafe-backend/routes/employees.js
8:20 error Parsing error: Unexpected token .

:heavy_multiplication_x: 1 problem (1 error, 0 warnings)

Changes to be committed:
(use “git restore --staged …” to unstage)
modified: code-cafe/package-lock.json
modified: code-cafe/package.json
modified: resources/react-resources/code-cafe-backend/package-lock.json

The code with the error is below:

resources/react-resources/code-cafe-backend/routes/employees.js

error
error765×42 7.08 KB

as well as the ESLint error in Visual Code:


Parsing error: Unexpected token .eslint

(parameter) req: Request<{}, any, any, qs.ParsedQs, Record<string, any>>
3

Hm, the ?. is optional chaining which is part of node 14 Optional chaining (?.) - JavaScript | MDN

First, double check that you are using node 14 or newer.
Assuming you using node 14 or newer, then there may be something confused by multiple package.json files/node_modules folders in the repository. (There are mono-repo tools which help sort that out, but it can result in confusing errors.)
If you have a root level package.json, you might check if it’s specifying a node version.
If none of that works, you could also take code-cafe-backend out of your repository since you won’t be changing any code in it.

4

Thanks you for the quick reply! Found a workaround before I read your post - used git command with --no-verify flag, e.g.:

git commit --no-verify -am "Example 8.1. Adding a server proxy (package.json)"

to continue rather than delete code-cafe-backend out of my repo - please let me know if I’m introducing even more issues!

Few notes, should they prove helpful:

  • One correction - I hadn’t enabled husky for cafe-code, this error comes from the husky rules set up in code-cafe-backend. npm run lint run from the code-cafe-backend directory shows same error.
  • (node v18.7.0) is used (edited original post to show log).

And one additional question(s) related to disable linting rules:

  • I was curious to see if the directions for disabling a linting rule specified in Chapter 5 would work as per below, but this insertion didn’t disable the rule. I’m curious as to why this error occured, as from the reading I thought // eslint-disable-next-line would disable all rules. Or do I have to specify a rule, and if so, how do I find out which rule to specify?
// eslint-disable-next-line  
  const name = req?.query?.name?.toLowerCase() || '';

On a related note, got the following error when adding Axios and then importing axios into App.js, even though I had run the command specified in the book: npm install --save axios@0.27.2, and also ran the suggested npm i -S axios.

'axios' should be listed in the project's dependencies. Run 'npm i -S axios' to add iteslintimport/no-extraneous-dependencies
(alias) const axios: AxiosStatic
import axios

However in this instance, Eslint had a quick fix available that auto-filled the rule in question:

// eslint-disable-next-line import/no-extraneous-dependencies
import axios from 'axios';

Hope it wasn’t an error to have accepted the quick fix.

5

Hm, maybe the lint command is running with a mis-matched eslint version or config.
The code-cafe-backend expects to be listed with the config defined in it’s root and the version in it’s package.json, but since it’s nested down in resources, it might be getting run with a different config or version.
You can’t disable it because it’s a parse error rather than a lint error. (It can’t read the file at all vs it can read it but thinks something should be different.)
I’m not sure why it’s having issues with it, but you can get rid of the optional chaining in line 8, which should fix the parse error

const name = ((req.query && req.query.name) || '').toLowerCase()

ESLint caches all the installed dependencies, so it probably just hadn’t updated the cache yet when it gave you that error. I’d double check that the version for axis in package.json is still 0.27.2. Running rpm i -S axios may have updated it
Once you reboot VSCode, you should be able to remove the disable, and it should notice axios is installed, but if it doesn’t, it’s fine to leave it there.

7

ESLint caches all the installed dependencies, so it probably just hadn’t updated the cache yet when it gave you that error. I’d double check that the version for axis in package.json is still 0.27.2 . Running rpm i -S axios may have updated it
Once you reboot VSCode, you should be able to remove the disable, and it should notice axios is installed, but if it doesn’t, it’s fine to leave it there.

Thank you for the help! It’s working now without the disable, but not sure what happened - changed the package.json to ‘0.27.2’, it worked, then changed it back to ‘^0.27.2’, still worked. Moving on for now, thanks again for quickly reply!

8

** Silver Challenge: Promise Practice

As I’m working through the challenges, posting my solutions - any comments/suggestions welcome.

resources/react-resources/code-cafe-resources/demos/promiseDemo.js

 const getData = () => {
     console.log("getData Running");
-    return Promise.resolve("yay!");
+    return Promise.reject("error!");
 };

Expected:

top
getDataRunning
error error
end

got:

top
getData Running
end
error error!

My original thought was that javascript would report the error as soon as possible (interrupting synchronous work), but given the output, my new thinking is that as Promise.reject is asynchronous work (just like Promise.resolve, then it make sense that error error! gets printed at the end.