How to fix “Uncaught ReferenceError: process is not defined” error

Ever run into this dreaded issue when working with Javascript or – preferably – Typescript?
Nothing is more frustrating than happily coding away, deciding you want to increase the security abstraction layer a bit – or perhaps you subscribe to the 12 Factor App – only to get met with this error.

Thankfully, you’ve come to the right place, as I will tell you exactly how to fix this issue!

Let’s dig in, shall we?

The root of the issue
The reason this is happening, is because for some reason you are not allowed to access process which could happen for a variety of reasons.

I will go over each of them in-depth, but they are:

  • Not properly picking up a new package
  • Server having a bad day / TS compilation issue(s)
  • Missing node types
  • Improper library versions
  • Not having a backend

Now, just for the sake of adding some context to make sure you and I are on the same page, for the rest of the article I will assume you are doing work on your localhost , on an unspecied (and unimportant to the point of this article) port.
Additionally, as you may have guessed, I am going to assume you are using Typescript, although these fixes should work in plain Javascript too.

Lastly, these issues are listed in order of occurrence for your convenience, as I’ve seen this error times enough to have found a good process for debugging it, so start from the top as that is the most common reason 🙂

The reasons this error shows up, and possible fixes

Not properly picking up a new package

Perhaps you’ve recently installed the library that was supposed to give you the freedom to start setting environment variables on process.env such as the popular dotenv library.


If you have just installed this package, I’ve learned there’s always two things you should do to ensure things keep rolling smoothly:

  1. Properly import the package
  2. Restart your development server

To properly import the package, specify it as such:

import dotenv from 'dotenv';

I’ve seen plenty of projects write their import as:

import * as dotenv from 'dotenv'

While this should work, I had many issues with it in the past, until I decided to go with the ´cleaner´ option.

Secondly, it’s important that you fully stop and then restart your development server.
Because environment variables are injecting when starting the server, they won’t automagically work with a restart as all your other code changes you will.

If you’re using something like nodemon , tsc --watch , ts-node or even ts-node-dev (which I’m a big advocate for), that means killing the process (typically with a CTRL-C) and starting it again.

Did it work? Great!

No? Well let’s try the next thing then..

Server having a bad day / TS compilation issue(s)

This one is short and sweet. Bit of a weird issue.

This happens frequently to me, on a weekly – if not occasionally daily – basis, for unknown reasons.

I’ll be happily coding away, on something completely unrelated to process.env by the way, and for whatever reason the compiler or development server is having a bad day and decides to throw a hizzy fit.

If you for some inexplicable reason all of a sudden just get the error in question, and you have not touched any process related code or replaced dotenv or something of that nature, simply try restarting your development server or run the tsc compilation again.

Mostly, this fixes the issue for me!

Missing node types

Another reason however, could also be that you haven’t installed the necessary types for your node version, which will confuse your editor and can give you this error in-editor, even if TS will compile just fine.

The simple fix here is to install the appropriate version of types/node .


What I mean with appropriate, is you should be installing the version of the types that matches the node version you are running. So if you are on node version 14, you should be installing types for node 14 as so:

npm install --save-dev @types/node@14.14.28

That should quelch the nasty error for you! But if it didn’t, read on..

Improper library versions

A worse situation to be in, is if you find yourself with an improper node version.
There could be a couple of situations in which we consider a version improper, but at its core it happens because there is a mismatch between a library and the node version.

This could happen because the library is just fetching the newest version, and it doesn’t play well with your version of node . This is true particularly if you are adding dotenv to an older codebase.

It could also be that you have an old version of a given library – such as dotenv – and have recently updated your node to a newer version, making the two incompatible.

This case is much less common and will require some debugging on your own, but a good starting point is getting friendly with the command npm outdated which can give you an indication of what might be going on.

Not having a “backend”


Last on the list, we have a unique case I am seeing more and more often.

As the wonderful world of frontend development keeps developing amazing tools and framework at break-neck speed, the documentation for errors arising on their behalf, struggle to keep up.

This is one such case.

A simple oversight, but if you’re developing on a newer frontend framework it may simply be that process actually does not exist.
This is because process is a feature of node, or more specifically, running your code in a server environment and not something that is a feature of javascript itself.

In other words, if you are building code that builds from something like vite it may very well be that process does not exist.

However, the Vite developers are smart and obviously aware of this, and they have tried compensating by giving access to a similar property import.meta .
So instead of

process.env.variable

your code becomes:

import.meta.env.variable

If you are not on Vite, but using another bundling tool, you might want to explore their documentation to find what the equivalent is in the particular framework.

Conclusion

If these steps didn’t help you resolve the issue, please don’t hesitate to reach out to me so I can add your solution to the list!

If it did, and you are looking to level up your Typescript game, I would be honored to add your email to my subscriber list, by filling out the form below.
I send an email about once every week or two, and I promise I won’t spam you 🙂