Zuck Posts - Answer Overflow

Zuck

•Created by Zuck on 9/27/2024 in #🙋questions

WASP App Wont Load Without Restarting Computer

My WASP App will load properly the first run, but it will not run no matter what i do the second time. So lets say i turn on my Macbook (m2 chip), I go to my wasp app, i wasp start db and wasp start. Everything opens great, app works. But if i save a change, or CTRL + C the terminal that started the app, no matter what (i close vscode, i wasp clean, etc). The app will NOT load again. Like it looks like its loading fine in the terminal. The online app link will work, but the local app link just endless load on any browser. Is my app getting too big ? Not sure what to do. Oh but if i restart my computer it works again just the one time

37 replies

WWasp-lang

•Created by Zuck on 9/6/2024 in #🙋questions

Creating DMG file with Electron?

Has anyone been able to convert their WASP app into a DMG file using electron or something else?

11 replies

WWasp-lang

•Created by Zuck on 8/29/2024 in #🙋questions

Outside of Vite service allow list

Hi Guys! I keep getting this randomly but for like every page.... [ Client!] The request url "/users/jacobferrari/documents/waspapp/my-saas/app/src/client/app/productpage.tsx" is outside of Vite serving allow list. it happens randomly. Is this a WASP thing? Let me know

36 replies

WWasp-lang

•Created by Zuck on 7/26/2024 in #🙋questions

*/migrations should not be in .gitignore right?

Just noticed */migrations is in my gitignore and im pretty sure WASP auto put it there. That shouldnt be there right?

6 replies

WWasp-lang

•Created by Zuck on 6/12/2024 in #🙋questions

Can't redirect after action taken

Im losing my marbles on this one. I'm using

useHistory

useHistory

from react-router-dom to try to redirect to 1 of 2 pages. But i can't get the redirect to work for the LIFE of me. My log response payload is:

[ Server ] Response payload: {
[ Server ]   message: 'Webhook received and processed',
[ Server ]   gptResponse: '2',
[ Server ]   redirectUrl: '/not-a-good-fit'
[ Server ] }

[ Server ] Response payload: {
[ Server ]   message: 'Webhook received and processed',
[ Server ]   gptResponse: '2',
[ Server ]   redirectUrl: '/not-a-good-fit'
[ Server ] }

Which is great that shows redirectUrl is being chosen correctly and gpt4o is giving me the ideal response. So why no redirect :sadboi: , i would use

useNavigate

useNavigate

but thats in new router-dom.

import React, { useEffect, useRef, useState } from 'react';
import { useHistory } from 'react-router-dom';

declare global {
  interface Window {
    Tally: any;
  }
}

const ApplicationForm: React.FC = () => {
  const iframeRef = useRef<HTMLIFrameElement>(null);
  const [isLoading, setIsLoading] = useState(false);
  const history = useHistory();

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://tally.so/widgets/embed.js';
    script.async = true;
    script.onload = () => {
      if (window.Tally) {
        window.Tally.loadEmbeds();
      } else {
        document.querySelectorAll("iframe[data-tally-src]:not([src])").forEach((iframe) => {
          iframe.setAttribute('src', iframe.getAttribute('data-tally-src')!);
        });
      }
    };
    script.onerror = () => {
      document.querySelectorAll("iframe[data-tally-src]:not([src])").forEach((iframe) => {
        iframe.setAttribute('src', iframe.getAttribute('data-tally-src')!);
      });
    };

    document.body.appendChild(script);

    window.addEventListener('message', handleFormSubmit);

    return () => {
      document.body.removeChild(script);
      window.removeEventListener('message', handleFormSubmit);
    };
  }, []);

  const handleFormSubmit = async (event: MessageEvent) => {
    console.log('Received message event:', event);
    console.log('Event data:', event.data);
    console.log('Event origin:', event.origin);
    console.log('Event type:', event.type);

    if (event.origin === 'https://tally.so' && event.data?.event === 'Tally.FormSubmitted') {
      const formData = event.data.payload;
      console.log('Form data received:', formData);

      setIsLoading(true);

      try {
        const response = await fetch('https://b168-99-250-72-13.ngrok-free.app/webhook/callback', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(formData),
        });

        console.log('Response received:', response);

        if (!response.ok) {
          throw new Error('Error calling webhook');
        }

        const data = await response.json();
        console.log('Response data:', data);

        const gptResponse = data.gptResponse;
        console.log('GPT-4 Response:', gptResponse);

        const redirectUrl = data.redirectUrl;
        console.log('Redirect URL:', redirectUrl);

        if (redirectUrl) {
          console.log('Redirecting to', redirectUrl);
          history.push(redirectUrl);
        } else {
          console.error('Unexpected GPT-4 response or missing redirect URL:', gptResponse);
        }
      } catch (error) {
        console.error('Error calling webhook:', error);
      } finally {
        setIsLoading(false);
      }
    }
  };

  return (
    <div className="container mx-auto px-6 py-12">
      {isLoading ? (
        <div>Loading...</div>
      ) : (
        <iframe
          ref={iframeRef}
          data-tally-src="https://tally.so/embed/3E118B?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1"
          loading="lazy"
          width="100%"
          height="1239"
          frameBorder="0"
          marginHeight={0}
          marginWidth={0}
          title="AI Engineer Application"
        ></iframe>
      )}
    </div>
  );
};

export default ApplicationForm;

import React, { useEffect, useRef, useState } from 'react';
import { useHistory } from 'react-router-dom';

declare global {
  interface Window {
    Tally: any;
  }
}

const ApplicationForm: React.FC = () => {
  const iframeRef = useRef<HTMLIFrameElement>(null);
  const [isLoading, setIsLoading] = useState(false);
  const history = useHistory();

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://tally.so/widgets/embed.js';
    script.async = true;
    script.onload = () => {
      if (window.Tally) {
        window.Tally.loadEmbeds();
      } else {
        document.querySelectorAll("iframe[data-tally-src]:not([src])").forEach((iframe) => {
          iframe.setAttribute('src', iframe.getAttribute('data-tally-src')!);
        });
      }
    };
    script.onerror = () => {
      document.querySelectorAll("iframe[data-tally-src]:not([src])").forEach((iframe) => {
        iframe.setAttribute('src', iframe.getAttribute('data-tally-src')!);
      });
    };

    document.body.appendChild(script);

    window.addEventListener('message', handleFormSubmit);

    return () => {
      document.body.removeChild(script);
      window.removeEventListener('message', handleFormSubmit);
    };
  }, []);

  const handleFormSubmit = async (event: MessageEvent) => {
    console.log('Received message event:', event);
    console.log('Event data:', event.data);
    console.log('Event origin:', event.origin);
    console.log('Event type:', event.type);

    if (event.origin === 'https://tally.so' && event.data?.event === 'Tally.FormSubmitted') {
      const formData = event.data.payload;
      console.log('Form data received:', formData);

      setIsLoading(true);

      try {
        const response = await fetch('https://b168-99-250-72-13.ngrok-free.app/webhook/callback', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(formData),
        });

        console.log('Response received:', response);

        if (!response.ok) {
          throw new Error('Error calling webhook');
        }

        const data = await response.json();
        console.log('Response data:', data);

        const gptResponse = data.gptResponse;
        console.log('GPT-4 Response:', gptResponse);

        const redirectUrl = data.redirectUrl;
        console.log('Redirect URL:', redirectUrl);

        if (redirectUrl) {
          console.log('Redirecting to', redirectUrl);
          history.push(redirectUrl);
        } else {
          console.error('Unexpected GPT-4 response or missing redirect URL:', gptResponse);
        }
      } catch (error) {
        console.error('Error calling webhook:', error);
      } finally {
        setIsLoading(false);
      }
    }
  };

  return (
    <div className="container mx-auto px-6 py-12">
      {isLoading ? (
        <div>Loading...</div>
      ) : (
        <iframe
          ref={iframeRef}
          data-tally-src="https://tally.so/embed/3E118B?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1"
          loading="lazy"
          width="100%"
          height="1239"
          frameBorder="0"
          marginHeight={0}
          marginWidth={0}
          title="AI Engineer Application"
        ></iframe>
      )}
    </div>
  );
};

export default ApplicationForm;

14 replies

WWasp-lang

•Created by Zuck on 6/11/2024 in #🙋questions

Some crazy WASP error!

Hey guys! This is a different project from my main design one so its pretty new, so i can afford any breaking fixes lol. I don't know what the heck happened but i get this error:

[ Server ] > [email protected] watch
[ Server ] > nodemon --exec 'npm run bundle-and-start || exit 1'
[ Server ] 
[ Client ] > [email protected] start
[ Client ] > npm run validate-env && vite
[ Client ] 
[ Server ] [nodemon] 2.0.22
[ Server ] [nodemon] to restart at any time, enter `rs`
[ Server ] [nodemon] watching path(s): src/**/* ../../../src/**/* .env
[ Server ] [nodemon] watching extensions: ts,mts,js,mjs,json
[ Server ] [nodemon] starting `npm run bundle-and-start || exit 1`
[ Client ] 
[ Client ] > [email protected] validate-env
[ Client ] > node -r dotenv/config ./scripts/validate-env.mjs
[ Client ] 
[ Client ] 🔍 Validating environment variables...
[ Server ] 
[ Server ] > [email protected] bundle-and-start
[ Server ] > npm run bundle && npm run start
[ Server ] 
[ Server ] 
[ Server ] > [email protected] bundle
[ Server ] > rollup --config --silent
[ Server ] 
[ Client ] 
[ Client ]   VITE v5.2.13  ready in 321 ms
[ Client ] 
[ Client ]   ➜  Local:   http://localhost:3000/
[ Client ]   ➜  Network: http://192.168.0.128:3000/
[ Client ]   ➜  press h + enter to show help
[ Server ] 
[ Server ] > [email protected] start
[ Server ] > npm run validate-env && node --enable-source-maps -r dotenv/config bundle/server.js
[ Server ] 
[ Server ] 
[ Server ] > [email protected] validate-env
[ Server ] > node -r dotenv/config ./scripts/validate-env.mjs
[ Server ] 
[ Server ] 🔍 Validating environment variables...
[ Server!] node:internal/modules/esm/resolve:264
[ Server!]     throw new ERR_MODULE_NOT_FOUND(
[ Server!]           ^
[ Server!] 
[ Server!] Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/jacobferrari/Documents/RecruitAI/RecruitAI/.wasp/out/sdk/wasp/dist/ext-src/queries.js.js' imported from /Users/jacobferrari/Documents/RecruitAI/RecruitAI/.wasp/out/sdk/wasp/dist/server/operations/queries/index.js
[ Server!]     at finalizeResolution (node:internal/modules/esm/resolve:264:11)
[ Server!]     at moduleResolve (node:internal/modules/esm/resolve:924:10)
[ Server!]     at defaultResolve (node:internal/modules/esm/resolve:1148:11)
[ Server!]     at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:390:12)
[ Server!]     at ModuleLoader.resolve (node:internal/modules/esm/loader:359:25)
[ Server!]     at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:234:38)
[ Server!]     at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
[ Server!]     at link (node:internal/modules/esm/module_job:86:36) {
[ Server!]   code: 'ERR_MODULE_NOT_FOUND',
[ Server!]   url: 'file:///Users/jacobferrari/Documents/RecruitAI/RecruitAI/.wasp/out/sdk/wasp/dist/ext-src/queries.js.js'
[ Server!] }
[ Server!] 
[ Server!] Node.js v21.7.1
[ Server ] [nodemon] app crashed - waiting for file changes before starting...


👀 --- [Warning] Your wasp project reported following warnings during compilation: ---

- Wasp was unable to verify your database is up to date. Running `wasp db migrate-dev` may fix this and will provide more info.

[ Server ] > [email protected] watch
[ Server ] > nodemon --exec 'npm run bundle-and-start || exit 1'
[ Server ] 
[ Client ] > [email protected] start
[ Client ] > npm run validate-env && vite
[ Client ] 
[ Server ] [nodemon] 2.0.22
[ Server ] [nodemon] to restart at any time, enter `rs`
[ Server ] [nodemon] watching path(s): src/**/* ../../../src/**/* .env
[ Server ] [nodemon] watching extensions: ts,mts,js,mjs,json
[ Server ] [nodemon] starting `npm run bundle-and-start || exit 1`
[ Client ] 
[ Client ] > [email protected] validate-env
[ Client ] > node -r dotenv/config ./scripts/validate-env.mjs
[ Client ] 
[ Client ] 🔍 Validating environment variables...
[ Server ] 
[ Server ] > [email protected] bundle-and-start
[ Server ] > npm run bundle && npm run start
[ Server ] 
[ Server ] 
[ Server ] > [email protected] bundle
[ Server ] > rollup --config --silent
[ Server ] 
[ Client ] 
[ Client ]   VITE v5.2.13  ready in 321 ms
[ Client ] 
[ Client ]   ➜  Local:   http://localhost:3000/
[ Client ]   ➜  Network: http://192.168.0.128:3000/
[ Client ]   ➜  press h + enter to show help
[ Server ] 
[ Server ] > [email protected] start
[ Server ] > npm run validate-env && node --enable-source-maps -r dotenv/config bundle/server.js
[ Server ] 
[ Server ] 
[ Server ] > [email protected] validate-env
[ Server ] > node -r dotenv/config ./scripts/validate-env.mjs
[ Server ] 
[ Server ] 🔍 Validating environment variables...
[ Server!] node:internal/modules/esm/resolve:264
[ Server!]     throw new ERR_MODULE_NOT_FOUND(
[ Server!]           ^
[ Server!] 
[ Server!] Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/jacobferrari/Documents/RecruitAI/RecruitAI/.wasp/out/sdk/wasp/dist/ext-src/queries.js.js' imported from /Users/jacobferrari/Documents/RecruitAI/RecruitAI/.wasp/out/sdk/wasp/dist/server/operations/queries/index.js
[ Server!]     at finalizeResolution (node:internal/modules/esm/resolve:264:11)
[ Server!]     at moduleResolve (node:internal/modules/esm/resolve:924:10)
[ Server!]     at defaultResolve (node:internal/modules/esm/resolve:1148:11)
[ Server!]     at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:390:12)
[ Server!]     at ModuleLoader.resolve (node:internal/modules/esm/loader:359:25)
[ Server!]     at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:234:38)
[ Server!]     at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
[ Server!]     at link (node:internal/modules/esm/module_job:86:36) {
[ Server!]   code: 'ERR_MODULE_NOT_FOUND',
[ Server!]   url: 'file:///Users/jacobferrari/Documents/RecruitAI/RecruitAI/.wasp/out/sdk/wasp/dist/ext-src/queries.js.js'
[ Server!] }
[ Server!] 
[ Server!] Node.js v21.7.1
[ Server ] [nodemon] app crashed - waiting for file changes before starting...


👀 --- [Warning] Your wasp project reported following warnings during compilation: ---

- Wasp was unable to verify your database is up to date. Running `wasp db migrate-dev` may fix this and will provide more info.

things are WILDING out. I think this line is key

[ Server!]   url: 'file:///Users/jacobferrari/Documents/RecruitAI/RecruitAI/.wasp/out/sdk/wasp/dist/ext-src/queries.js.js'

[ Server!]   url: 'file:///Users/jacobferrari/Documents/RecruitAI/RecruitAI/.wasp/out/sdk/wasp/dist/ext-src/queries.js.js'

Pretty sure it shouldn't be looking there. Something kind of similar to this happened way back when I was using direct imports but from what I see and done all my imports are relative. Heres a link to the full WASP project code: https://www.mediafire.com/file/78efctqk6a6e75h/RecruitAI.zip/file

18 replies

WWasp-lang

•Created by Zuck on 5/30/2024 in #🙋questions

CORS Issues After Deployment (Email Auth)

Access to XMLHttpRequest at 'https://desi...' from origin 'https://desi...' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index-Bh8OtO0g.js:57 
        
        
       POST https://des... net::ERR_FAILED

signup:1 Access to XMLHttpRequest at 'https://desi...' from origin 'https:...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index-Bh8OtO0g.js:57 
        
        
       GET https://desig... net::ERR_FAILED 502 (Bad Gateway)

Access to XMLHttpRequest at 'https://desi...' from origin 'https://desi...' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index-Bh8OtO0g.js:57 
        
        
       POST https://des... net::ERR_FAILED

signup:1 Access to XMLHttpRequest at 'https://desi...' from origin 'https:...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index-Bh8OtO0g.js:57 
        
        
       GET https://desig... net::ERR_FAILED 502 (Bad Gateway)

Sorry to keep berading with questions (although i seem to eventually solve them haha. But i'm getting CORS errors during the signup and login process after deploying. Do i have to setup CORS in a different way upon deployment? I thought WASP handled that. Also the app isnt ready yet so i just deleted the full url

47 replies

WWasp-lang

•Created by Zuck on 5/27/2024 in #🙋questions

Best Solution to Automate Workflows

I definitely need advice. Im beginning to automate workflows in businesses (connecting APIs with an LLM on top) Im about to start developing for clients. I had always used make .com before because it’s easy to connect APIs together. But now I’ve gotten pretty decent at using WASP & React and I feel like that can be more flexible than something low code. Also something lacking with make is the ability to create a dashboard if I need the user to click a button or type some input to start the workflow automation. Can I use WASP in an away where I can run API requests in a chain at scheduled times and create multiple dashboards with it ? Or better yet should I combo WASP with make? WASP can be used to make the dashboards? Or I guess WASP makes CRON jobs pretty easy and this is the way? Also note: the goal is create these workflow automations quick and lower cost (let’s say $20k on avg per project) (right now if I’m building it out that doesn’t matter but when we hire team on it will) Haha just want advice 🙏

8 replies

WWasp-lang

•Created by Zuck on 5/14/2024 in #🙋questions

Anyone got RAG working with WASP?

My current approach is to use langchains build in vector storage but i want the vector data to be stored in Postgre database that WASP makes. - crappy coder that uses AI to code religiously

10 replies

WWasp-lang

•Created by Zuck on 4/13/2024 in #🙋questions

freaking out a little bit

WASP 13.2 [ Client ] > [email protected] start [ Client ] > npm run validate-env && vite [ Client ] [ Server ] > [email protected] watch [ Server ] > nodemon --exec 'npm run bundle-and-start || exit 1' [ Server ] [ Client ] [ Client ] > [email protected] validate-env [ Client ] > node -r dotenv/config ./scripts/validate-env.mjs [ Client ] [ Client!] node:internal/modules/esm/resolve:264 [ Client!] throw new ERR_MODULE_NOT_FOUND( [ Client!] ^ [ Client!] [ Client!] Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/jacobferrari/Documents/WASP App/my-saas/app/node_modules/wasp/dist/universal/validators.js' imported from /Users/jacobferrari/Documents/WASP App/my-saas/app/.wasp/out/web-app/scripts/validate-env.mjs [ Client!] at finalizeResolution (node:internal/modules/esm/resolve:264:11) [ Client!] at moduleResolve (node:internal/modules/esm/resolve:924:10) [ Client!] at defaultResolve (node:internal/modules/esm/resolve:1148:11) [ Client!] at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:390:12) [ Client!] at ModuleLoader.resolve (node:internal/modules/esm/loader:359:25) [ Client!] at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:234:38) [ Client!] at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39) [ Client!] at link (node:internal/modules/esm/module_job:86:36) { [ Client!] code: 'ERR_MODULE_NOT_FOUND', [ Client!] url: 'file:///Users/jacobferrari/Documents/WASP%20App/my-saas/app/node_modules/wasp/dist/universal/validators.js' [ Client!] } [ Client!] [ Client!] Node.js v21.7.1 No idea what’s causing it, already tried deleting package-lock and wasp folder and reinstalling.

45 replies

Gaming

Programming