Stuck at Part 3 Typeahead

[louisguitton]

Hi 👋 , thanks for this course. So far I've found the content straightforward while the Next Steps were challenging. But suddenly, I started facing issues at Part 3 Typeahead https://testdriven.io/courses/django-full-text-search/typeahead/

Replace the existing query Form.Control component with a new AsyncTypeahead component as shown below:

This step breaks my app with Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

I've read https://reactjs.org/warnings/invalid-hook-call-warning.html, in particular the Duplicate React section. I've added details of my setup below.

I'm a React noob so I don't know where to start to debug this. I've looked at the code in the part 3 folder of this repo and I don't see any difference with mine (beyond formatting). Any idea what might be happening @ParentJA ?

```sh → npm ls react perusable@ /Users/louis.guitton/workspace/perusable └─┬ react-bootstrap-typeahead@5.1.4 ├─┬ @restart/hooks@0.3.26 │ └── react@17.0.2 deduped ├─┬ react-dom@17.0.2 │ └── react@17.0.2 deduped ├─┬ react-overlays@4.1.1 │ ├── react@17.0.2 deduped │ └─┬ uncontrollable@7.2.1 │ └── react@17.0.2 deduped ├─┬ react-popper@1.3.11 │ ├─┬ @hypnosphi/create-react-context@0.3.1 │ │ └── react@17.0.2 deduped │ └── react@17.0.2 deduped └── react@17.0.2 ```

[ParentJA]

Hi @louisguitton, can you link me to your repo? That way I can pull down the code on my computer and troubleshoot more easily. Thanks!

[louisguitton]

Thanks for the quick reply @ParentJA, I appreciate you wanting to have a look at the repo directly. I've pushed quickly my code here https://github.com/louisguitton/perusable . In the readme, I've listed the few ways that come to mind in which my codebase will differ from yours I guess, but nothing that should impact this particular issue I think.

Working setup

git checkout main
docker-compose up --build
cd client && yarn start

To Reproduce the error:

git checkout main
git cherry-pick part3-chap21
docker-compose up --build
cd client && yarn start

The questions I've listed in my readme (including this issue) are non-blocking for me, and I'm moving on with Part 4 right now. So no rush. I was only wondering if I did something wrong and if others were facing this issue.

[ParentJA]

@louisguitton Here's what I did:

1. Cloned your repo to my local machine.
2. Checked out the part3-chap21 branch.
3. Changed directories to your client folder.
4. Ran npm install.
5. Ran npm install react-bootstrap-typeahead --save because it wasn't in your package.json.
6. Ran docker-compose up -d --build.
7. Ran npm start.
8. Loaded the browser and didn't see any errors.

Would you mind following these steps in an empty directory and seeing if you're still seeing the error?

[louisguitton]

I just ran npm install react-bootstrap-typeahead --save and had no errors either 🤦 Thanks a lot. Embarrassing mistake... a history -E | grep 'npm install' confirmed I never ran it ...