Wasp•5w ago

I need help with adding a new route

Dear wasp community, I'm starting my new SaaS and I want to add new pages. But when I run into this error:

~/documents/yawningstudio/app$ wasp db migrate-dev

🐝 --- Compiling wasp project... --------------------------------------------------
✅ --- Successfully completed npm install. ----------------------------------------
🐝 --- Setting up database... -----------------------------------------------------
✅ --- Database successfully set up. ----------------------------------------------
🐝 --- Building SDK... ------------------------------------------------------------
[  Wasp  ] ext-src/client/components/NavBar/contentSections.ts(8,32): error TS2339: Property 'StudioRoute' does not exist on type '{ readonly LandingPageRoute: { readonly to: "/"; readonly build: (options?: OptionalRouteOptions) => string; }; readonly LoginRoute: { readonly to: "/login"; readonly build: (options?: OptionalRouteOptions) => string; }; ... 19 more ...; readonly AdminMessagesRoute: { ...; }; }'.

❌ --- [Error] Your wasp project failed to compile: -------------------------------
- SDK build failed with exit code: 2

❌ --- [Error] Compilation of wasp project failed: --------------------------------
1 errors found

~/documents/yawningstudio/app$ wasp db migrate-dev

🐝 --- Compiling wasp project... --------------------------------------------------
✅ --- Successfully completed npm install. ----------------------------------------
🐝 --- Setting up database... -----------------------------------------------------
✅ --- Database successfully set up. ----------------------------------------------
🐝 --- Building SDK... ------------------------------------------------------------
[  Wasp  ] ext-src/client/components/NavBar/contentSections.ts(8,32): error TS2339: Property 'StudioRoute' does not exist on type '{ readonly LandingPageRoute: { readonly to: "/"; readonly build: (options?: OptionalRouteOptions) => string; }; readonly LoginRoute: { readonly to: "/login"; readonly build: (options?: OptionalRouteOptions) => string; }; ... 19 more ...; readonly AdminMessagesRoute: { ...; }; }'.

❌ --- [Error] Your wasp project failed to compile: -------------------------------
- SDK build failed with exit code: 2

❌ --- [Error] Compilation of wasp project failed: --------------------------------
1 errors found

My understanding is that it's not detected the new route I added. This is what contentSections.ts looks like (I added line 8 - Studio)

import type { NavigationItem } from '../NavBar/NavBar';
import { routes } from 'wasp/client/router';
import { BlogUrl, DocsUrl } from '../../../shared/common';

export const appNavigationItems: NavigationItem[] = [
  { name: 'AI Scheduler (Demo App)', to: routes.DemoAppRoute.to },
  { name: 'File Upload (AWS S3)', to: routes.FileUploadRoute.to },
  { name: 'Studio', to: routes.StudioRoute.to },
  { name: 'Pricing', to: routes.PricingPageRoute.to },
  { name: 'Documentation', to: DocsUrl },
  { name: 'Blog', to: BlogUrl },
];

import type { NavigationItem } from '../NavBar/NavBar';
import { routes } from 'wasp/client/router';
import { BlogUrl, DocsUrl } from '../../../shared/common';

export const appNavigationItems: NavigationItem[] = [
  { name: 'AI Scheduler (Demo App)', to: routes.DemoAppRoute.to },
  { name: 'File Upload (AWS S3)', to: routes.FileUploadRoute.to },
  { name: 'Studio', to: routes.StudioRoute.to },
  { name: 'Pricing', to: routes.PricingPageRoute.to },
  { name: 'Documentation', to: DocsUrl },
  { name: 'Blog', to: BlogUrl },
];

And I also made sure to add Studio in index.d.ts and index.js

3 Replies

kapa.ai•5w ago

Hi @Xuban. 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 your question and the knowledge sources available, it appears you're trying to add a new route called "StudioRoute" to your Wasp application. The error you're encountering suggests that this route hasn't been properly defined in your Wasp configuration. Let's address this issue step by step: 1. First, you need to define the new route and page in your main.wasp file. According to the Wasp documentation on adding pages (https://wasp-lang.dev/docs/tutorial/pages#adding-a-second-page), you should add something like this to your main.wasp file:

route StudioRoute { path: "/studio", to: StudioPage }
page StudioPage {
  component: import { StudioPage } from "@src/StudioPage"
}

route StudioRoute { path: "/studio", to: StudioPage }
page StudioPage {
  component: import { StudioPage } from "@src/StudioPage"
}

2. After adding this to your main.wasp file, you need to create the corresponding React component in your src folder. Create a file named StudioPage.jsx (or StudioPage.tsx if you're using TypeScript) in your src folder and define your Studio page component there. 3. The error you're seeing in contentSections.ts is because the StudioRoute is not recognized. This file is likely auto-generated by Wasp based on your main.wasp configuration. After properly defining the route in main.wasp, you should run wasp start again to regenerate these files. 4. Regarding the changes you made to index.d.ts and index.js, these files are typically auto-generated by Wasp and shouldn't be modified manually. Instead, focus on defining your routes and pages in the main.wasp file. 5. After making these changes, try running wasp db migrate-dev again. If you've properly defined the new route in main.wasp, this should resolve the error you're seeing. If you're still encountering issues after following these steps, you might want to double-check your main.wasp file for any syntax errors or missing declarations. For more detailed information on adding routes and pages in Wasp, you can refer to the following documentation: - Adding a Second Page (https://wasp-lang.dev/docs/tutorial/pages#adding-a-second-page) - Project Structure (https://wasp-lang.dev/docs/tutorial/project-structure#mainwasp) Remember, when adding new routes or making significant changes to your Wasp application, it's often helpful to run wasp start to ensure all the necessary files are regenerated correctly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Xuban, 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?

XubanOP•5w ago

this bot is great

MEE6•5w ago

Wohooo @Xuban, you just became a Waspeteer level 2!

Gaming

Programming

I need help with adding a new route

Did you find this page helpful?