Wasp•12mo 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

~/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 },
];

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

kapa.ai•12/30/24, 1:20 PM

Hi @Xuban. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•12/30/24, 1:20 PM

----------------------
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:

First, you need to define the new route and page in your
```
main.wasp
```
```
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
```
```
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"
}

After adding this to your
```
main.wasp
```
```
main.wasp
```
file, you need to create the corresponding React component in your srcsrc folder. Create a file named StudioPage.jsxStudioPage.jsx (or StudioPage.tsxStudioPage.tsx if you're using TypeScript) in your srcsrc folder and define your Studio page component there.
The error you're seeing in contentSections.tscontentSections.ts is because the StudioRouteStudioRoute is not recognized. This file is likely auto-generated by Wasp based on your
```
main.wasp
```
```
main.wasp
```
configuration. After properly defining the route in
```
main.wasp
```
```
main.wasp
```
, you should run
```
wasp start
```
```
wasp start
```
again to regenerate these files.
Regarding the changes you made to
```
index.d.ts
```
```
index.d.ts
```
and
```
index.js
```
```
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
```
```
main.wasp
```
file.
After making these changes, try running
```
wasp db migrate-dev
```
```
wasp db migrate-dev
```
again. If you've properly defined the new route in
```
main.wasp
```
```
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

main.wasp

file for any syntax errors or missing declarations.

kapa.ai•12/30/24, 1:20 PM

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

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:
----------------------

kapa.ai•12/30/24, 1:20 PM

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•12/30/24, 1:23 PM

this bot is great

MEE6•12/30/24, 1:23 PM

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

I need help with adding a new route

Similar Threads

Similar Threads

Similar Threads