Vite 'process is not defined' error

Hello! So I’m pretty new to Vite, but not React, so sorry if this an obvious one. I’ve tried a couple things, but I keep getting the above error in the console along with a blank screen once the app goes to sleep. I’m wondering if there’s a best practice for Glitch or if I’m missing something in the Vite docs (which are a little vague, imo)

My code - [ project removed - 7/24/21 ]

Here’s what’s worked temporarily:

  1. changing my .env variables to import.meta.env instead of process.env etc. with VITE_ etc.
  2. adding vite-plugin-environment to my dev dependencies, which allowed me to use process.env without VITE_ (current solution)

I’ve also looked at Vite’s Github and a few people have altered the config file (specifically the mode) but they seem to be dated responses.

Thanks for taking a look :slight_smile:

1 Like

Hi @christina and welcome to the forum!

Thanks for the great problem description including your code and what you tried!

I don’t think this is going to be “an obvious one” so no worries :slight_smile:

Haven’t tried Vite for myself yet but I have seen things like this in other Glitch projects after they go to sleep…

I noticed (from my remix) that your logs say the dev server is running, but it’s a generated_static site. At first I thought this was weird but then I checked an 11ty site, and yep, turns out that’s how they work; run the start command (rather than build).

image

So that’s probably fine… just a mystery why it would kind of fail to start back up again after going to sleep. And a little hard to repro!

Let us know if you make any headway, and I’m sure other on here will want to chime in :slight_smile:

1 Like

There’s a good chance I’ll just move this project off Glitch soon; I understand that it can be tricky hooking up API’s and one can end up in endless loops / making too many calls to an API. (And in my case, the Pexels API is a bit limited.) That can of course happen with CRA too but Vite runs faster so I imagine more people will be attempting complex projects with it. I’m curious to see how much we’ll be able to do in-browser going forward! I like working with Glitch a lot more than pushing to Github.

While older versions of Vite did support process.env, this was removed some time ago. By default the current version only supports import.meta.env with VITE_ prefix.

I have not used the plugin you mentioned, so I do not know how well it works. However, a non-plugin way would be to use define in the Vite config file:

define: {
  'process.env.SOME_ENV': `"${process.env.SOME_ENV}"`
}

When all this is said, that will not fix your problem. The process is not defined error is not from your use of process.env, it is from the vendor.js bundle; or more specifically the Pexels package you import in src/index.jsx.
If you can, you should downgrade to Pexels v1.0.0. It seems it is the only version that does not have this problem.

1 Like

Thank you for the clear explanation!

I’ll try your code in my config files going forward because I prefer to not use too many plugins.

You’re right that must be the latest Pexels API; I tried to push the project live with Netlify and got the same error in the console. I ended up just moving it into Create React App and it works now.

1 Like