Error with Mage
I just discovered wasp and Mage I just created a dummy example to try it because I find it very usefull. I installed all dependencidies and when I run wasp start the localhost:3000 is a blank pare. This is my Home.jsx:
import React from 'react';
import { useQuery } from 'wasp/client/operations';
import { getRestaurants } from 'wasp/client/operations';
import { Link } from 'wasp/client/router';
const HomePage = () => {
const { data: restaurants, isLoading, error } = useQuery(getRestaurants);
if (isLoading) return 'Loading...';
if (error) return 'Error: ' + error;
return (
<div className='p-4'>
<h1 className='text-2xl font-bold mb-4'>Restaurants</h1>
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
{restaurants.map((restaurant) => (
<div key={restaurant.id} className='bg-white p-4 rounded-lg shadow-md hover:shadow-lg'>
<h2 className='text-xl font-semibold'>{restaurant.name}</h2>
<p className='text-gray-700'>{restaurant.address}</p>
<Link to={
/restaurant/${restaurant.id}} className='text-blue-500 hover:underline mt-2 inline-block'>
View Profile
</Link>
</div>
))}
</div>
</div>
);
}
export default HomePage;4 Replies
Hi @pollastrepiupiu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the knowledge sources and your question, it seems you're experiencing an issue with a Mage-generated Wasp app. This is a common problem, as Mage (GPT) can sometimes make mistakes in the generated code. Let's try to troubleshoot the issue:
1. First, check your browser's developer tools console for any error messages. The most common error in such cases is related to import statements.
2. In your code, you're importing
getRestaurants from 'wasp/client/operations', but this might be incorrect. According to the Wasp documentation on queries, you should import your queries individually. Try changing your import statement to:
3. Make sure that you have defined the getRestaurants query in your main.wasp file and implemented it in your operations file (usually src/queries.js or similar).
4. Check your main.wasp file to ensure that the HomePage component is correctly referenced. It should look something like this:
5. If you're still seeing a blank page, it could be due to an error in the server-side code. Check your terminal where you ran wasp start for any error messages related to the server.
6. As suggested by a Wasp team member in the Discord support thread, you can try running:
This will clean the build and start fresh, which might resolve some issues.
If these steps don't resolve your issue, you might need to share more details about your app, including the main.wasp file and any server-side operations. The Wasp team is actively working on improving error messages, especially for path-related issues, so future versions should provide more clarity.
Remember, when using Mage to generate Wasp apps, it's important to review the generated code and be prepared to make some adjustments, as GPT can sometimes introduce errors or inconsistencies.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @pollastrepiupiu, 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?If it's a blank page, there has to be some error in the browser console, could you check it and see? 🙂
You are right, thank you! I will debug it 🙂
I just discovered wasp and I found it amazing, but I'm a ML Engineer and I don't know almost anything about full stack development. Have you got any tutorial session?
You can start here: https://wasp.sh/docs/tutorial/create
1. Creating a New Project | Wasp
You'll need to have the latest version of Wasp installed locally to follow this tutorial. If you haven't installed it yet, check out the QuickStart guide!