Added a new page, can't get it to load
Hi I am new here so please bear with the newbie question!
I am using the default saas template [option 3 when running wasp new]. In the main.wasp file I have created a new route and page, and also created the tsx file for the page and referenced it's location correctly. However the page is blank when I navigate to it in my browser. Note sure what I am doing wrongly
main.wasp code
//#region Client
route ClientRoute { path: "/client", to: ClientPage }
page ClientPage {
authRequired: true,
component: import ClientPage from "@src/client-page/ClientPage"
}
//#endregion
ClientPage.tsx in src/client-page/
import React, { useState } from 'react';
import { useAuth } from 'wasp/client/auth';
function ClientPage() {
const [clientName, setClientName] = useState('');
const [clientDescription, setClientDescription] = useState('');
const { data: user, isLoading, error } = useAuth();
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
const handleClientSubmit = async (event) => {
event.preventDefault();
// Add your API call to save the client's company name and description here
console.log('Submitting:', { clientName, clientDescription });
};
return (
<div>
<h1>Client Page</h1>
<p>Welcome, {user?.email}</p>
<form onSubmit={handleClientSubmit}>
<label>Company Name:</label>
<input
type="text"
value={clientName}
onChange={(e) => setClientName(e.target.value)}
/>
<br />
<label>Description:</label>
<textarea
value={clientDescription}
onChange={(e) => setClientDescription(e.target.value)}
/>
<br />
<button type="submit">Submit</button>
</form>
</div>
);
}
export default ClientPage;
6 Replies
Hi @cking!M. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
From the code you've provided, it seems like you've correctly set up the route and page in your
main.wasp file and also created the corresponding ClientPage.tsx file. However, there's a small mistake in your main.wasp file.
In Wasp, when you're importing a component, you should use the named import syntax, not the default import syntax. So, in your main.wasp file, you should change the component line to:
And in your ClientPage.tsx file, you should change the export line to:
This is in line with the examples provided in the Wasp documentation on adding a second page (https://wasp-lang.dev/docs/tutorial/pages#adding-a-second-page) and project structure (https://wasp-lang.dev/docs/tutorial/project-structure#mainwasp).
Please make these changes and try again. If you're still facing issues, feel free to ask for more help!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @cking!M, 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?silly question, but as auth is required, are you signed in?
yes I am signed in. otherwise it would redirect to my home page
Wohooo @cking!M, you just became a Waspeteer level 2!
Did you check the browser console to see if there are any errors?
As miho said, you likely have an error but it is manifesting as blank screen + errors in the dev console in your browser, so check that out!