server env variables cause process is not defined

Wasp version - 0.12.3 Root .env.server with sendgrid api key Chrome macos

18 Replies

Hi @marti. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error Uncaught ReferenceError: process is not defined typically occurs when you're trying to access Node.js specific variables or modules in the client-side code. In Wasp, environment variables can be used in both the client and the server code, but they are handled differently. For server-side code, you can directly use process.env.YOUR_VARIABLE to access environment variables. However, for client-side code, you need to prefix your environment variables with REACT_APP_ and access them using import.meta.env.REACT_APP_YOUR_VARIABLE. If you're seeing this error, it's likely that you're trying to access a server environment variable in your client-side code without the REACT_APP_ prefix. Please ensure that you're using the correct prefix and accessing method based on where you're using the environment variables. For more information, you can refer to the Wasp documentation on environment variables (https://wasp-lang.dev/docs/project/env-vars). If you're still facing issues, it would be helpful to know more about where and how you're trying to use these environment variables. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @marti, 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•8mo ago

Please take a screenshot of the error or copy paste the error so we can better understand what is going on 🙂

martiOP•8mo ago

The error exactly is what I said above. Uncaught reference error: process is not defined. And if I go into the error it is where sendgrid api key is used. Const emailProvider = { Type: ‘sendgrid’, ApiKey: process.env.SENDGRID_API_KEY, } as const;

miho•8mo ago

Some extra info would help me: - Did you see this error in the terminal or browser console? - When did this error appear? On start or somewhere along the way? - Also, share any piece of code you can e.g. where you import import { emailSender } from 'wasp/server/email' - Are you trying to import this in a React component?

martiOP•8mo ago

ok sorry 😄 no terminal error, this error si from browser console this happened after I replaced dummy email provider with sendgrid so what I did was creted .env.server in root with SENDGRID_API_KEY= in main.wasp I did this

emailSender: {
    provider: SendGrid,
    defaultFrom: {
      name: "default",
      email: "[email protected]"
    },
  }

emailSender: {
    provider: SendGrid,
    defaultFrom: {
      name: "default",
      email: "[email protected]"
    },
  }

and that's it, after I restarted the server I saw this err

miho•8mo ago

- Okay now we are getting somwhere 🙂 okay, so you took the OpenSaaS template and just replaced the email sender? - Did you modify the code in any other way e.g. changed some of the React components or added new imports somewhere? - Btw. if you are just starting out, I'd recommend upgrading to Wasp 0.13.1 curl -sSL https://get.wasp-lang.dev/installer.sh | sh -s - Btw. if you had the Dummy provider, you probably took the template code from the main branch of the repository 😄 because we didn't have the Dummy provider in Wasp 0.12.3

martiOP•8mo ago

when I did this curl -sSL https://get.wasp-lang.dev/installer.sh | sh -s -- -v 0.13.1 and when I do wasp start I see error

Your Wasp version does not match the app's requirements.
You are running Wasp 0.13.1.
This app requires Wasp ^0.12.3.
To install specific version of Wasp, do:
  curl -sSL https://get.wasp-lang.dev/installer.sh | sh -s -- -v x.y.z
where x.y.z is your desired version.
Check https://github.com/wasp-lang/wasp/releases for the list of valid versions

Your Wasp version does not match the app's requirements.
You are running Wasp 0.13.1.
This app requires Wasp ^0.12.3.
To install specific version of Wasp, do:
  curl -sSL https://get.wasp-lang.dev/installer.sh | sh -s -- -v x.y.z
where x.y.z is your desired version.
Check https://github.com/wasp-lang/wasp/releases for the list of valid versions

- I might just start over haha...I have not that manny stuff to c/p

MEE6•8mo ago

Wohooo @marti, you just became a Waspeteer level 1!

martinsos•8mo ago

Uncaught reference error: process is not defined. coming from the browser console -> sounds like server code using process is being imported into client code and therefore failing, since client is not available in the browser?

martiOP•8mo ago

yes, that was my thought as well, but nowhere in the client is using process and when I track the err in console it leads me to wasp part -> ApiKey: process.env.SENDGRID_API_KEY,

miho•8mo ago

Did you modify the code in any other way e.g. changed some of the React components or added new imports somewhere?

One thing for debug you can do: modify your vite.config.ts to look like this

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    open: false,
  },
  plugins: [
    {
      name: 'detect-server-imports-on-client',
      transform(code, id) {
        const isInDotWaspFolder = id.includes('.wasp')

        if (isInDotWaspFolder) {
          // Skip checking files in .wasp folder.
          return
        }

        const codeContainsServerImport = code.includes('wasp/server')

        if (codeContainsServerImport) {
          throw new Error(
            `File ${id} contains a server import. This is not allowed in the client code.`
          )
        }
      },
    },
  ],
})

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    open: false,
  },
  plugins: [
    {
      name: 'detect-server-imports-on-client',
      transform(code, id) {
        const isInDotWaspFolder = id.includes('.wasp')

        if (isInDotWaspFolder) {
          // Skip checking files in .wasp folder.
          return
        }

        const codeContainsServerImport = code.includes('wasp/server')

        if (codeContainsServerImport) {
          throw new Error(
            `File ${id} contains a server import. This is not allowed in the client code.`
          )
        }
      },
    },
  ],
})

And then start your app, let me know if you get a big red error in the browser 😂

martiOP•8mo ago

I tried upgrading wasp, but now I get err

Your Wasp version does not match the app's requirements.
You are running Wasp 0.13.1.
This app requires Wasp ^0.12.3.
To install specific version of Wasp, do:
  curl -sSL https://get.wasp-lang.dev/installer.sh | sh -s -- -v x.y.z
where x.y.z is your desired version.
Check https://github.com/wasp-lang/wasp/releases for the list of valid versions.

Your Wasp version does not match the app's requirements.
You are running Wasp 0.13.1.
This app requires Wasp ^0.12.3.
To install specific version of Wasp, do:
  curl -sSL https://get.wasp-lang.dev/installer.sh | sh -s -- -v x.y.z
where x.y.z is your desired version.
Check https://github.com/wasp-lang/wasp/releases for the list of valid versions.

😫 I got actually

[plugin:detect-server-imports-on-client] File /Users/martinazrnec/Documents/workspace/luvano-homes/luvano/src/actions/sendEmail.ts contains a server import. This is not allowed in the client code.

[plugin:detect-server-imports-on-client] File /Users/martinazrnec/Documents/workspace/luvano-homes/luvano/src/actions/sendEmail.ts contains a server import. This is not allowed in the client code.

And I followed the docs and did same as they did import { emailSender } from "wasp/server/email"; So my sendEmail.ts looks like

import { emailSender } from "wasp/server/email";

type EmailPayload = {
  email: string;
  from: string;
  title: string;
  text: string;
};

export const sendEmail = async (props: EmailPayload) => {
  const { email, from, title, text } = props;
  const info = await emailSender.send({
    from: {
      name: from,
      email: email,
    },
    to: "***@gmail.com",
    subject: title,
    text: text,
    html: text,
  });
  return info;
};

import { emailSender } from "wasp/server/email";

type EmailPayload = {
  email: string;
  from: string;
  title: string;
  text: string;
};

export const sendEmail = async (props: EmailPayload) => {
  const { email, from, title, text } = props;
  const info = await emailSender.send({
    from: {
      name: from,
      email: email,
    },
    to: "***@gmail.com",
    subject: title,
    text: text,
    html: text,
  });
  return info;
};

But apparently I am doing something wrong. Can you help me?

miho•8mo ago

Did you import the sendEmail action from wasp/server/operations in your React component? 😄

martiOP•8mo ago

No, I imported it from actions import { sendEmail } from "../../actions/sendEmail";

miho•8mo ago

Aw yes, you can't do that 😄 you can't import stuff that's backend specific on the client

miho•8mo ago

I'd recommend going through the Wasp tutorial to get the hang of the queries and actions in Wasp, but specifically this part: https://wasp-lang.dev/docs/tutorial/actions#invoking-the-action-on-the-client

6. Modifying Data | Wasp

In the previous section, we learned about using Queries to fetch data and only briefly mentioned that Actions can be used to update the database. Let's learn more about Actions so we can add and update tasks in the database.

miho•8mo ago

Even though client and server files live alongside each other, there is still a network between them 😄 Server code is running in Node.js and the client code in the browser. You need to use the wasp/client/operations import to invoke the actions properly. When you use that, a network call happens in the background calling the server from the client. Calling the action directly, will try to execute server code in the browser which is no bueno and fails with the error you saw.

martiOP•8mo ago

thank you so much 🙏

Gaming

Programming

server env variables cause process is not defined