fix: dev/production build

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) {

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));

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 {

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>

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>

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "allowJs": true,
-    "module": "commonjs",
+    "module": "ESNext",
     "skipLibCheck": true,
     "esModuleInterop": true,
     "noImplicitAny": true,