diff --git a/src/main/SentryClient.ts b/src/main/SentryClient.ts
index 0751078c..d2349af8 100644
--- a/src/main/SentryClient.ts
+++ b/src/main/SentryClient.ts
@@ -16,8 +16,9 @@ export class SentryClient {
 
     let dsn;
     try {
-      const extraResourcesPath =
-        process.env.NODE_ENV === 'production' ? path.join(process.resourcesPath, 'extraResources') : 'extraResources';
+      const extraResourcesPath = import.meta.env.PROD
+        ? path.join(process.resourcesPath, 'extraResources')
+        : 'extraResources';
 
       dsn = fs.readFileSync(path.join(extraResourcesPath, '.sentrydsn'), { encoding: 'utf-8' });
     } catch (e) {
diff --git a/src/main/index.ts b/src/main/index.ts
index ca756162..a37f094b 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -122,7 +122,7 @@ function initializeApp() {
 
     mainWindow.center();
 
-    if (process.env.NODE_ENV === 'development') {
+    if (import.meta.env.DEV) {
       mainWindow.webContents.openDevTools();
     }
 
@@ -137,7 +137,7 @@ function initializeApp() {
       return { action: 'deny' };
     });
 
-    if (process.env.NODE_ENV === 'development') {
+    if (import.meta.env.DEV) {
       // Open the DevTools.
       settings.openInEditor();
       mainWindow.webContents.once('dom-ready', () => {
@@ -213,7 +213,7 @@ function initializeApp() {
   app.on('ready', () => {
     createWindow();
 
-    if (process.env.NODE_ENV === 'development') {
+    if (import.meta.env.DEV) {
       installExtension(REACT_DEVELOPER_TOOLS)
         .then((name) => console.log(`Added Extension:  ${name}`))
         .catch((err) => console.log('An error occurred: ', err));
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
index f4051a5e..a0888d8d 100644
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -1,6 +1,7 @@
-// <reference types="node" />
-// <reference types="react" />
-// <reference types="react-dom" />
+import 'node';
+import 'react';
+import 'react-dom';
+import 'vite/client';
 
 declare namespace NodeJS {
   interface ProcessEnv {
diff --git a/src/renderer/components/App/NavBar.tsx b/src/renderer/components/App/NavBar.tsx
index 3e45c8c6..ff658aa6 100644
--- a/src/renderer/components/App/NavBar.tsx
+++ b/src/renderer/components/App/NavBar.tsx
@@ -17,7 +17,7 @@ export const NavBar: FC = ({ children }) => {
       <div className="flex flex-col gap-y-5">{children}</div>
 
       <div className="mt-auto flex flex-col gap-y-5">
-        {process.env.NODE_ENV === 'development' && (
+        {import.meta.env.DEV && (
           <NavbarItem to="/debug" className="border-none">
             <Wrench className="text-gray-100" size={28} strokeWidth={1} />
           </NavbarItem>
diff --git a/src/renderer/components/App/index.tsx b/src/renderer/components/App/index.tsx
index 0f69920e..3bb23564 100644
--- a/src/renderer/components/App/index.tsx
+++ b/src/renderer/components/App/index.tsx
@@ -145,7 +145,7 @@ const App = () => {
               <div className="flex h-full flex-1 flex-row items-stretch overflow-hidden">
                 <Logo />
 
-                {process.env.NODE_ENV === 'development' && (
+                {import.meta.env.DEV && (
                   <div className="my-auto ml-32 flex gap-x-4 text-2xl text-gray-400">
                     <pre>{packageInfo.version}</pre>
                     <pre className="text-gray-500">|</pre>
diff --git a/tsconfig.json b/tsconfig.json
index b31ac9ea..c28841db 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "allowJs": true,
-    "module": "commonjs",
+    "module": "ESNext",
     "skipLibCheck": true,
     "esModuleInterop": true,
     "noImplicitAny": true,