Wasp-lang•7mo ago

white screen, how to debug?

While trying to get my feet wet in React and Wasp I now face a white screen after wasp start... The browsers states: "You need to enable JavaScript to run this app." although javascript is enabled. I found wasp clean acts like turning it of and on, so tried that. After wasp start again I now have the 'wasp/client/operations" missing Error Cannot find module 'wasp/server' or its corresponding type declarations. Tried npm install without success... How do I debug this? No errors are shown in wasp start Any ideas

10 Replies

MEE6•7mo ago

Wohooo @Start2Panic, you just became a Waspeteer level 1!

kapa.ai•7mo ago

Hi @Start2Panic. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry to hear you're having trouble with your Wasp project. Here are some steps you can take to debug the issue: 1. Check your Wasp version: Make sure you have the latest version of Wasp installed. You can check this by running wasp version in your terminal. 2. Run wasp clean and wasp start again: You've already done this, but it's worth mentioning for completeness. wasp clean removes all generated code and other cached artifacts, and wasp start launches the Wasp app in development mode. If there are any issues with the generated code or cached artifacts, this should resolve them. 3. Check for errors in the browser's developer tools: Open the developer tools in your browser (usually by pressing F12) and look for any errors in the console. These errors can provide clues about what's going wrong. 4. Check your server.ts file: The error message "Cannot find module 'wasp/server' or its corresponding type declarations" suggests there might be an issue with your server.ts file. Make sure this file is correctly importing the wasp/server module. 5. Try running npm install again: If the wasp/server module is missing, running npm install should install it. If npm install is failing, the error messages it produces can help identify the problem. 6. Check for issues with your Wasp project's setup: The error message "Cannot find module 'wasp/server' or its corresponding type declarations" could also indicate an issue with your Wasp project's setup. Make sure your project is correctly set up according to the Wasp documentation (https://wasp-lang.dev/docs/general/cli#project-commands). If none of these steps resolve the issue, it might be helpful to ask for help on the Wasp Discord server (https://discord.com/channels/686873244791210014/1213958217537814640) or GitHub (https://github.com/wasp-lang/wasp/issues/48). The Wasp community is very active and may be able to provide further assistance. Sources: - Discord support thread: nothing shows up in localhost:3000 after wasp start > Answers Part 1 (https://discord.com/channels/686873244791210014/1213958217537814640) - Discord support thread: Hey! Any ideas on some solutions to these errors? > Answers (https://discord.com/channels/686873244791210014/1215750573278629958) - Docs > General > CLI Reference > Commands > Project Commands Part 1 (https://wasp-lang.dev/docs/general/cli#project-commands) - Github Issue (open): Implement Wasp CLI Powerline > Comments (https://github.com/wasp-lang/wasp/issues/250) - Github Issue (closed): Investigate Prisma client initialization error on first start after clean > Original post Part 2 (https://github.com/wasp-lang/wasp/issues/427) - Github Issue (open): Clean up the output of wasp start > Comments (https://github.com/wasp-lang/wasp/issues/1081) - Github Issue (open): Have Wasp produce detailed info/report about your app > Comments (https://github.com/wasp-lang/wasp/issues/1419) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Start2Panic, 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?

miho•7mo ago

Bot gave some good initial advice, please try it and let's see what happens 🙂

Start2PanicOP•7mo ago

Found it via Development Tools Console Log!

miho•7mo ago

Nice 🙂 what happened in the end? Did you manage to fix it?

Start2PanicOP•7mo ago

I had a const outside the export function 🤫

martinsos•7mo ago

well that shouldn't neccessary be a problem hm!

Start2PanicOP•7mo ago

Just to be sure I recreated the issue. When having the const jobs hook before the export I get an all white page:

const { data: jobs, isLoading: isJobsLoading, error } = useQuery(getJobs);

export default function JobPage() {

  const history = useHistory();

  return (

const { data: jobs, isLoading: isJobsLoading, error } = useQuery(getJobs);

export default function JobPage() {

  const history = useHistory();

  return (

The browser console hints the error:

react.development.js:209 
 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.

react.development.js:209 
 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.

miho•7mo ago

Makes sense 👍 functions named useSomething are special React functions called hooks and they have their "rules" of usage: https://react.dev/reference/rules/rules-of-hooks

Rules of Hooks – React

The library for web and native user interfaces

martinsos•7mo ago

Ah yes, ok so problem is not in const being outside of the function, the problem is that you are using hook useQuery outside of the React component function JobPage.

Gaming

Programming

white screen, how to debug?