Error deploying after migrating to ^0.15.0

The wasp start works fine and show all fine. Doing wasp deploy fly deploy it fails giving me these errors:

Visit your newly deployed app at https://toograded-server.fly.dev/
🚀  Server has been deployed! 
🚀  Deploying your client now... 
$ cd /home/rootall/apps/minisaas-boilerplate/app/.wasp/build/web-app
🚀  Building web client for production... 
🚀  If you configured a custom domain for the server, you should run the command with an env variable: REACT_APP_API_URL=https://serverUrl.com wasp deploy fly deploy
$ npm install

added 1 package, and audited 84 packages in 975ms

11 packages are looking for funding
  run

npm fund

 for details

found 0 vulnerabilities
$ REACT_APP_API_URL=https://toograded-server.fly.dev npm run build

> [email protected] build
> npm run validate-env && tsc && vite build


> [email protected] validate-env
> node -r dotenv/config ./scripts/validate-env.mjs

🔍 Validating environment variables...
src/router.tsx(68,13): error TS2741: Property 'children' is missing in type '{}' but required in type '{ children: ReactNode; }'.
file:///home/rootall/.local/share/wasp-lang/0.15.0/data/packages/deploy/node_modules/zx/build/core.js:146
            let output = new ProcessOutput(code, signal, stdout, stderr, combined, message);
                         ^

ProcessOutput [Error]:
    at deployClient (file:///home/rootall/.local/share/wasp-lang/0.15.0/data/packages/deploy/dist/providers/fly/deploy/deploy.js:82:13)
    exit code: 2 (Misuse of shell builtins)
    at ChildProcess.<anonymous> (file:///home/rootall/.local/share/wasp-lang/0.15.0/data/packages/deploy/node_modules/zx/build/core.js:146:26)
    at ChildProcess.emit (node:events:517:28)
    at maybeClose (node:internal/child_process:1098:16)
    at ChildProcess._handle.onexit (node:internal/child_process:303:5)
    at Process.callbackTrampoline (node:internal/async_hooks:128:17) {
  _code: 2,
  _signal: null,
  _stdout: '\n' +
    '> [email protected] build\n' +
    '> npm run validate-env && tsc && vite build\n' +
    '\n' +
    '\n' +
    '> [email protected] validate-env\n' +
    '> node -r dotenv/config ./scripts/validate-env.mjs\n' +
    '\n' +
    '🔍 Validating environment variables...\n' +
    "src/router.tsx(68,13): error TS2741: Property 'children' is missing in type '{}' but required in type '{ children: ReactNode; }'.\n",
  _stderr: '',
  _combined: '\n' +
    '> [email protected] build\n' +
    '> npm run validate-env && tsc && vite build\n' +
    '\n' +
    '\n' +
    '> [email protected] validate-env\n' +
    '> node -r dotenv/config ./scripts/validate-env.mjs\n' +
    '\n' +
    '🔍 Validating environment variables...\n' +
    "src/router.tsx(68,13): error TS2741: Property 'children' is missing in type '{}' but required in type '{ children: ReactNode; }'.\n"
}

Node.js v18.20.4


❌ --- [Error] Deploy command failed: ---------------------------------------------

Deploy command failed with exit code: 1

19 Replies

kapa.ai•3w ago

Hi @NEROX. 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 error message you've provided, it seems you're encountering an issue related to the children prop in your React component after migrating to Wasp version ^0.15.0. This is a common issue that has been reported before. Let me explain the problem and provide a solution. The error message states:

src/router.tsx(68,13): error TS2741: Property 'children' is missing in type '{}' but required in type '{ children: ReactNode; }'.

src/router.tsx(68,13): error TS2741: Property 'children' is missing in type '{}' but required in type '{ children: ReactNode; }'.

This error is occurring because your App component in src/router.tsx is not properly set up to accept children. This is a known issue that has been discussed in the Wasp community. To fix this, you need to modify your App component to accept children. Here's how you can do it: 1. Open your src/router.tsx file. 2. Find your App component definition (it should be around line 68). 3. Modify the App component to accept children as a prop. Here's an example of how your App component should look:

const App = ({ children }: { children: React.ReactNode }) => {
  // Your existing App component code
  return (
    // Your existing JSX
    {children}
    // Rest of your JSX
  );
}

const App = ({ children }: { children: React.ReactNode }) => {
  // Your existing App component code
  return (
    // Your existing JSX
    {children}
    // Rest of your JSX
  );
}

This change ensures that your App component is set up to receive and render child components, which is required in the context it's being used. This solution is based on a similar issue discussed in the Wasp Discord community here (https://discord.com/channels/686873244791210014/1219134547711758416). After making this change, try deploying again using wasp deploy fly deploy. If you encounter any further issues, please let me know, and I'll be happy to help you troubleshoot. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

NEROXOP•3w ago

@kapa.ai I don't have @src/router.tsx

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books:

MEE6•3w ago

Wohooo @NEROX, you just became a Waspeteer level 11!

kapa.ai•3w ago

---------------------- I apologize for the confusion. You're right to point out that you don't have a @src/router.tsx file. Let's clarify the situation based on the information we have. In Wasp projects, the router is typically handled automatically by the framework, and you don't usually need to modify it directly. The error you're seeing is likely coming from a generated file within the .wasp directory. Given that you don't have direct access to router.tsx, the issue is probably in your root component. In Wasp, the root component is specified in the main.wasp file. Let's try to address the problem there: 1. Open your main.wasp file. 2. Look for the client section where you define your root component. It should look something like this:

app MyApp {
  // ...
  client: {
    rootComponent: import Root from "@src/Root.jsx", // or .tsx if you're using TypeScript
  }
}

app MyApp {
  // ...
  client: {
    rootComponent: import Root from "@src/Root.jsx", // or .tsx if you're using TypeScript
  }
}

3. Now, open the file that contains your root component (likely Root.jsx or Root.tsx in your src directory). 4. Modify this root component to accept children as a prop. Here's an example of how it should look:

import React from 'react';

export default function Root({ children }) {
  return (
    <div>
      {/* Your existing root component content */}
      {children}
    </div>
  );
}

import React from 'react';

export default function Root({ children }) {
  return (
    <div>
      {/* Your existing root component content */}
      {children}
    </div>
  );
}

If you're using TypeScript, the component should look like this:

import React from 'react';

export default function Root({ children }: { children: React.ReactNode }) {
  return (
    <div>
      {/* Your existing root component content */}
      {children}
    </div>
  );
}

import React from 'react';

export default function Root({ children }: { children: React.ReactNode }) {
  return (
    <div>
      {/* Your existing root component content */}
      {children}
    </div>
  );
}

This change ensures that your root component is set up to receive and render child components, which is required for Wasp's routing system to work correctly. After making these changes, try deploying again using wasp deploy fly deploy. If you're still encountering issues, it would be helpful to see the content of your main.wasp file and your root component file. This information would allow me to provide more specific guidance. Source for root component configuration (https://wasp-lang.dev/docs/project/client-config#api-reference) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

NEROXOP•3w ago

~~Trying...~~ Edit:Fixed!

NEROXOP•3w ago

@kapa.ai my fly server gives me a : 24-10-31T10:46:10.018 app[9185e234a95398] mia [info] Datasource "db": PostgreSQL database 2024-10-31T10:46:10.044 app[9185e234a95398] mia [info] Error: Prisma schema validation - (get-config wasm) 2024-10-31T10:46:10.044 app[9185e234a95398] mia [info] Error code: P1012 2024-10-31T10:46:10.044 app[9185e234a95398] mia [info] error: Error validating datasource db: You must provide a nonempty URL. The environment variable DATABASE_URL resolved to an empty string. 2024-10-31T10:46:10.044 app[9185e234a95398] mia [info] --> /app/.wasp/build/db/schema.prisma:3 2024-10-31T10:46:10.044 app[9185e234a95398] mia [info] | 2024-10-31T10:46:10.044 app[9185e234a95398] mia [info] 2 | provider = "postgresql" 2024-10-31T10:46:10.044 app[9185e234a95398] mia [info] 3 | url = env("DATABASE_URL") What's wrong with my saas template? It's practically by default

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the error message you've provided, it appears that your Fly.io server is encountering an issue with the DATABASE_URL environment variable. The error suggests that the DATABASE_URL is resolving to an empty string, which is causing Prisma to fail during schema validation. This is a common issue when deploying Wasp applications, especially if the environment variables are not properly set up on the deployment platform. Here are a few steps you can take to resolve this issue: 1. First, make sure you have set the DATABASE_URL environment variable on Fly.io. You can do this using the Fly.io CLI with the following command:

   fly secrets set DATABASE_URL="your-database-connection-string"

   fly secrets set DATABASE_URL="your-database-connection-string"

Replace "your-database-connection-string" with your actual PostgreSQL database URL. 2. If you've already set the environment variable, double-check that it's correctly formatted and that the connection string is valid. 3. Ensure that your .env.server file in your local project does not contain any sensitive information, as recommended in the Wasp documentation here (https://wasp-lang.dev/docs/project/env-vars). 4. If you're using the Wasp CLI for deployment, make sure you're using the latest version of Wasp, as there have been improvements to environment variable handling in recent versions. 5. You might also want to check if your main.wasp file has the correct database configuration. It should look something like this:

   app MyApp {
     // ...
     db: {
       system: PostgreSQL,
       // ...
     }
   }

   app MyApp {
     // ...
     db: {
       system: PostgreSQL,
       // ...
     }
   }

6. If you're still having issues, you can try manually setting the DATABASE_URL when deploying using the Wasp CLI:

   DATABASE_URL="your-database-connection-string" wasp deploy fly deploy

   DATABASE_URL="your-database-connection-string" wasp deploy fly deploy

This method is mentioned in a Discord support thread here (https://discord.com/channels/686873244791210014/1196865084304150639). If none of these steps resolve the issue, it might be helpful to review your deployment process and ensure all the necessary steps for setting up the database on Fly.io have been completed correctly. Remember, when dealing with database connection strings, be cautious not to expose sensitive information in public repositories or logs. Source for Wasp environment variables documentation (https://wasp-lang.dev/docs/project/env-vars) Source for Fly.io deployment in Wasp (https://wasp-lang.dev/docs/advanced/deployment/cli#flyio) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

NEROXOP•3w ago

@kapa.ai but I didn't configured any db, I ran the wasp deploy command to fly and done. How can I know my correcto database url now in fly?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand your confusion. It seems you've used the automated deployment process provided by Wasp, which should have set up a database for you on Fly.io. Let me guide you on how to find your correct database URL. When you use wasp deploy fly deploy, Wasp automatically sets up a PostgreSQL database on Fly.io for you. However, you need to retrieve the connection details to use it properly. Here's how you can find your correct database URL on Fly: 1. First, make sure you're logged in to Fly.io CLI by running:

   flyctl auth whoami

   flyctl auth whoami

If you're not logged in, use flyctl auth login. 2. To get your database name, run:

   fly postgres connect -a <your-app-name>-db

   fly postgres connect -a <your-app-name>-db

This will connect you to the database. Once connected, type \l to list all databases. Your database name should be there. 3. To get the database password, run:

   fly ssh console -a <your-app-name>-db

   fly ssh console -a <your-app-name>-db

Then, in the console, type:

   echo $OPERATOR_PASSWORD

   echo $OPERATOR_PASSWORD

This will show you the database password. 4. With this information, you can construct your DATABASE_URL. It should look like this:

   DATABASE_URL=postgres://postgres:<password>@<your-app-name>-db.internal:5432/<db_name>

   DATABASE_URL=postgres://postgres:<password>@<your-app-name>-db.internal:5432/<db_name>

5. To set this URL as an environment variable for your app, use:

   fly secrets set DATABASE_URL="postgres://postgres:<password>@<your-app-name>-db.internal:5432/<db_name>"

   fly secrets set DATABASE_URL="postgres://postgres:<password>@<your-app-name>-db.internal:5432/<db_name>"

These steps are based on the information provided in a GitHub issue discussing database seeding on Fly.io here (https://github.com/wasp-lang/wasp/issues/1464). After setting the correct DATABASE_URL, you should redeploy your app using wasp deploy fly deploy to ensure the changes take effect. Remember to keep your database credentials secure and never share them publicly. Source for Fly.io database setup (https://github.com/wasp-lang/wasp/issues/1464) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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•3w ago

Can a human help you with something? 🙂

NEROXOP•3w ago

Maybe yes, I just deployed https://closedsaas-client.fly.dev/ but the server doesn't work

2024-10-31 12:27:09.276    
> [email protected] db-migrate-prod
2024-10-31 12:27:08.576    
> npm run db-migrate-prod && NODE_ENV=production npm run start
2024-10-31 12:27:08.576    
> [email protected] start-production
2024-10-31 12:27:07.835    
2024/10/31 11:27:07 INFO SSH listening listen_address=[fdaa🅰️7f67:a7b:2c6:1381:55e2:2]:22 dns_server=[fdaa::3]:53
2024-10-31 12:27:07.612    
machine started in 829.685021ms
2024-10-31 12:27:07.611    
Machine started in 825ms
2024-10-31 12:27:07.607    
 INFO [fly api proxy] listening at /.fly/api
2024-10-31 12:27:07.598    
 INFO Preparing to run:

npm run start-production

 as root
2024-10-31 12:27:07.530    
 INFO Starting init (commit: 693c179a)...


2024-10-31 12:27:06.848    
2024-10-31T11:27:06.847982213 [01JBH4Y2HC3PNEZ27Y9D59R98R:main] Running Firecracker v1.7.0
2024-10-31 12:27:06.783    
Starting machine
2024-10-31 12:27:06.548    
[PC01] instance refused connection. is your app listening on 0.0.0.0:3000? make sure it is not only listening on 127.0.0.1 (hint: look at your startup logs, servers often print the address they are listening on)
2024-10-31 12:21:42.576    
Server listening on port 8080

Last problem was the empty STRIPE_API_KEY but I already pushed it correctly.

My Open SaaS App

I made a SaaS App. Buy my stuff.

miho•3w ago

How did you deploy it?

NEROXOP•3w ago

wasp deploy fly launch closedsaas mia

miho•3w ago

I can see Server listening on port 8080 which would mean some env vars are not set up properly - maybe the PORT env var is incorrect? If this is just a demo app - could you try deleting the apps, the TOML files and retrying?

NEROXOP•3w ago

Tried again but nothing. Is something here maybe relevant? The toml files are default created by wasp deploy fly deploy

message.txt

NEROXOP•3w ago

oh, the stats.ts

Vinny (@Wasp)•7d ago

Did you ever get this resolved?

NEROXOP•7d ago

yep, solved in other ticket

Gaming

Programming

Error deploying after migrating to ^0.15.0