How do you debug a whitescreen in wasp/react project?
How do you debug a whitescreen in wasp/react project?
1 Reply
Hi @skyblade2954. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The white screen issue in a Wasp/React project could be due to a double installation of React. Here are the steps to reproduce and temporarily fix the issue as mentioned in one of the Github issues (https://github.com/wasp-lang/wasp/issues/1640):
Steps to reproduce:
1. Checkout
filip-project-install-step
2. Go to waspc/examples/todo-typescript
3. Run rm -r .wasp node_modules package-lock.json migrations; cabal run wasp-cli db migrate-dev -- --name init && cabal run wasp-cli start
4. Open the browser, you should see a white screen and a console full of errors caused by a double react installation
Temporary fix:
- Run ./fix
and restart the app (with cabal run wasp-cli start
). This script deletes the redundant react installation and Vite's cache.
To debug and find a permanent solution, you might want to investigate how the SDK, user's code, and web app's code resolve React. It's important to figure out who uses which React installation. Also, try to understand what triggered this behavior. The problem only appeared after merging the auth stuff into the restructuring branches. Comparing the old build output with the new output might provide some insights.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @skyblade2954, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?