Fix: Electron App Startup Failure - Module Not Found

Dec 2, 2025 by Alex Johnson 53 views

Electron App Fails on Startup: Cannot Find Module '../modules/shared/types'

Is your Electron app crashing with a "Cannot find module" error on startup? This is a common issue, especially when working with TypeScript. This guide will walk you through understanding the problem and implementing a solution. Let's dive in and get your app up and running!

Description

You've built your Electron app, everything seems fine, but when you run it, you're greeted with a dreaded error message:

App threw an error during load
Error: Cannot find module '../modules/shared/types'
Require stack:
- C:\Users\Jay\Documents\Github\GitGoneWild\Jarvis\dist\main\main.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1084:15)
    at s._resolveFilename (node:electron/js2c/browser_init:2:114421)
    at Module._load (node:internal/modules/cjs/loader:929:27)
    at c._load (node:electron/js2c/node_init:2:13672)
    at Module.require (node:internal/modules/cjs/loader:1150:19)
    at require (node:internal/modules/cjs/helpers:119:18)
    at Object.<anonymous> (C:\Users\Jay\Documents\Github\GitGoneWild\Jarvis\dist\main\main.js:45:17)
    at Module._compile (node:internal/modules/cjs/loader:1271:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1326:10)
    at Module.load (node:internal/modules/cjs/loader:1126:32)

You're running your app locally with npm run build && electron ., the build process completes successfully, but the app crashes at runtime. This error indicates that the app is unable to locate a required module, specifically ../modules/shared/types. This can be frustrating, but understanding the root cause is the first step toward resolving it.

This error typically arises when your Electron app, especially one built with TypeScript, fails to correctly handle the separation between TypeScript types and runtime JavaScript modules. The TypeScript compiler erases type-only imports during compilation, which can lead to missing modules at runtime if not handled carefully. Let's delve deeper into why this happens and how to fix it.

This issue often stems from how TypeScript handles imports, particularly when using import type. When you declare an import type, TypeScript knows that it only needs this import for type-checking purposes and strips it away during the compilation process to JavaScript. This optimization is great for reducing the size of your JavaScript bundles, but it can cause problems when you need those imports at runtime. For instance, if you're importing a constant or a function alongside your types from the same module, the compiled JavaScript might not include the necessary require or import statements to load those runtime values.

So, what's the real issue here? It’s the mix of type-only imports and runtime imports from the same module. TypeScript's import type is a powerful feature, but it's essential to use it correctly. When you import both types and values from the same module, you need to ensure that the runtime values are still accessible in your compiled JavaScript. If not, Node.js, which Electron uses to run your app, won't be able to find the required modules, leading to the dreaded “Cannot find module” error.

To effectively tackle this problem, we need to refactor our imports to clearly separate type imports from runtime value imports. This involves modifying your import statements and potentially restructuring your modules to make the distinction clear. By doing so, you ensure that the necessary code is included in your compiled output, allowing your Electron app to start smoothly. Now, let's examine the context and steps to reproduce this error to gain a more practical understanding.

Context

Let's break down the context to better understand the problem:

Your project uses TypeScript for both the main and renderer processes. This is evident from the presence of tsconfig.main.json and tsconfig.renderer.json files. TypeScript is fantastic for adding static typing to your JavaScript code, but it introduces a compilation step that can sometimes lead to unexpected issues like this one.
The import statement in your main.ts file looks like this:
```
import type {
  Meal,
  WeightEntry,
  SleepEntry,
  BloodPressureEntry,
  Medication,
  Bookmark,
  VPNProfile,
  VPNStatus,
  DetectedTool,
  ToolName,
  UpdateInfo,
  RealDebridAccount,
  HealthData,
  VPNData,
  BookmarksData,
  ToolsData,
} from '../modules/shared/types';
import { defaultModuleSettings as defaultModules } from '../modules/shared/types';
```
This is where the issue lies. You're using import type for a bunch of types, which is correct for type-checking purposes. However, you're also importing defaultModuleSettings from the same module without the type keyword. This means you're trying to use a runtime value from a module where TypeScript might be stripping out the necessary import during compilation.
The error occurs because, as mentioned earlier, TypeScript type-only imports (import type) are erased during the compilation process. This is a feature, not a bug, as it helps reduce the size of your final JavaScript bundle. However, in this case, it's causing a problem because defaultModuleSettings is a runtime value, and Node.js cannot find it in the dist directory after compilation.
Node.js, which Electron uses, relies on the compiled JavaScript files in the dist directory. If the necessary modules aren’t present in the dist directory, Node.js won’t be able to load them, resulting in the “Cannot find module” error. This is why it’s essential to ensure that all runtime dependencies are correctly included during the build process.

To fully grasp the situation, it’s important to see the problem in action. The next section, “Steps to Reproduce,” provides a clear guide on how to recreate the error, allowing you to better understand the cause and test the solution.

Steps to Reproduce

To reproduce this error, follow these simple steps:

Clone the repository: This ensures you have the exact code that's causing the issue.
Run npm install: This command installs all the necessary dependencies defined in the package.json file. Without these dependencies, the app won't build or run correctly.
Run npm run build: This command executes the build script defined in your package.json, which typically involves compiling the TypeScript code into JavaScript and placing it in the dist directory. This is a crucial step because it's during this process that the TypeScript compiler might be stripping out the necessary runtime imports.
Run electron .: This command starts the Electron application. The . tells Electron to look for the main script in the current directory, which after the build, should be the dist directory.
Observe the error: If the issue persists, you should see the