How to make imports in transpiled file point to external folder

[Celtic-Bytes]

I have an Electron application using TypeScript, Vite, and React.

Inside the app the code is divided into two folders.

1. In the src/electron folder, I have all the Electron-related code, and it is transpiled directly by TypeScript to the dist-electronfolder. ( some code like classes, interfaces,etc are shared with the src/ui folder).

2. In the src/ui folder i have the renderer part (React) and Vite transpile it to the dist-react folder.

Vite is configured to use the Electron code as external, but when i transpile my project, the imports path in the dist-react folder that points to the dist-electron folder are like that:

import { I18nService, Lang } from "@electron/services";

When I launch my Electron app, I get an error because it expects an import like that:

import { I18nService, Lang } from "../../dist-electron/services";

This is the error:

index.html:1 Uncaught TypeError: Failed to resolve module specifier "@electron/services". Relative references must start with either "/", "./", or "../".

How can I configure Vite to fix those imports to point to the correct external folder?

Structure of my project:

C:.
│   index.html
│   package.json
│   tsconfig.app.json
│   tsconfig.json
│   tsconfig.node.json
│   vite.config.ts
│
├───dist-electron     <==== Output folder for the src/electron folder
│   │   tsconfig.electron.tsbuildinfo
│   ├───apis
│   ├───models
│   └───services
│
├───dist-react        <==== Output folder for the src/ui folder
│   │   index.html
│   └───assets
│           index-Da2_jhOH.js
│
└───src
    ├───electron
    │   │   main.ts
    │   │   tsconfig.electron.json
    │   ├───apis
    │   ├───models
    │   └───services
    │
    └───ui
        │   main.tsx
        │   vite-env.d.ts
        ├───components
        └───views

This is my Vite config:

import react from "@vitejs/plugin-react";
import path from "path";
import { defineConfig } from "vite";

// https://vite.dev/config/
export default defineConfig({
    base: "./",
    plugins: [react()],
    build: {
        outDir: "dist-react",
        sourcemap: true,
        rollupOptions: {
            // treeshake: "smallest",
            external: (id) => id.includes("electron/"),
            output: {
                manualChunks(id) {
                    if (id.includes("electron")) {
                        return "electron";
                    }
                    if (id.includes("antd")) {
                        return "antd";
                    }
                    if (id.includes("react")) {
                        return "react";
                    }
                },
                paths: {
                    "@electron/": path.resolve(__dirname, "dist-electron")
                }
            }
        },
        // ---- turn off minify | Remove this for production------
        minify: false,
        terserOptions: {
            compress: false,
            mangle: false
        }
        //--------------------------------------
    },
    resolve: {
        alias: {
            "@electron": path.resolve(__dirname, "src", "electron")
        }
    },
    server: {
        port: 5173,
        strictPort: true
    }
});

tsconfig.app.json (React):

{
    "compilerOptions": {
        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
        "target": "ES2020",
        "useDefineForClassFields": true,
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "module": "ESNext",
        "skipLibCheck": true,
        "sourceMap": true,

        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "isolatedModules": true,
        "moduleDetection": "force",
        "noEmit": true,
        "jsx": "react-jsx",

        /* Linting */
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "strictPropertyInitialization": false,
        "composite": true,
        "declaration": true,
        "allowSyntheticDefaultImports": true,
        "paths": {
            "@electron/*": ["./src/electron/*"]
        }
    },
    "include": ["src/ui"],
    "references": [{ "path": "./src/electron/tsconfig.electron.json" }]
}

src/electron/tsconfig.electron.json:

{
    "compilerOptions": {
        "composite": true,
        "declaration": true,
        "allowSyntheticDefaultImports": true, // if esModuleInterop is set to true, this property is automatically true
        "esModuleInterop": true,
        "module": "NodeNext", // tell TypeScript to require ESM Syntax as input ( includin .js file imports) when we write our code
        "moduleResolution": "nodenext",
        "outDir": "../../dist-electron",
        "resolveJsonModule": true,
        "skipLibCheck": true, // ignore errors from dependencies that are not fully ready for typescript
        "sourceMap": true,
        "strict": true, // require strict types (null-save)
        "strictPropertyInitialization": false,
        "target": "ESNext", // tell TypeScript to generate ESM Syntax when build
        "types": ["./window.d.ts"],
        "forceConsistentCasingInFileNames": true
    },
    "include": ["."]
}

tsconfig.json:

{
    "files": [],
    "references": [
        { "path": "./tsconfig.app.json" },
        { "path": "./tsconfig.node.json" },
        { "path": "./src/electron/tsconfig.electron.json" }
    ]
}

package.json:

{
    "name": "name",
    "private": true,
    "version": "0.0.0",
    "main": "dist-electron/main.js",
    "type": "module",
    "author": {},
    "scripts": {
        "dev:electron": "nodemon --exec \"npm run build && electron .\"",
        "dev:ui-only": "vite",
        "watch": "nodemon --exec \"npm run build\"",
        "build": "npm run clean && tsc --project src/electron/tsconfig.electron.json && tsc -b && vite build",
        "build:react": "npm run clean && tsc -b && vite build",
        "build:electron": "npm run clean && tsc --project src/electron/tsconfig.electron.json",
        "lint": "eslint .",
        "preview": "vite preview",
        "dist:win": "npm run build && electron-builder --win --x64",
        "dist:mac": "npm run build && electron-builder --mac --arm64",
        "dist:linux": "npm run build && electron-builder --linux --x64",
        "clean": "node clean.cjs"
    },
    "dependencies": {
        "antd": "^5.22.3",
        "axios": "^1.7.9",
        "meowvies": "file:",
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
        "rxjs": "^7.8.1"
    },
    "devDependencies": {
        "@eslint/js": "^9.15.0",
        "@types/node": "^22.10.1",
        "@types/react": "^18.3.12",
        "@types/react-dom": "^18.3.1",
        "@vitejs/plugin-react": "^4.3.4",
        "electron": "^33.2.1",
        "electron-builder": "^25.1.8",
        "eslint": "^9.15.0",
        "eslint-plugin-react-hooks": "^5.0.0",
        "eslint-plugin-react-refresh": "^0.4.14",
        "globals": "^15.12.0",
        "nodemon": "^3.1.7",
        "typescript": "~5.6.2",
        "typescript-eslint": "^8.15.0",
        "vite": "^6.0.1"
    }
}

[hi-ogawa]

How can I configure Vite to fix those imports to point to the correct external folder?

Assuming this is only for vite build, you can probably try using resolveId to specify external to a different path https://rollupjs.org/plugin-development/#resolveid
I haven't tested at all, but maybe something like this

plugins: [
  {
    name: "test",
    resolveId(source) {
      if (source.startsWith("@electron")) {
        return { external: "relative", id: source.replace("@electron", path.resolve(__dirname, "dist-electron")) }
      }
    }
  }
]

[Celtic-Bytes]

Thanks for the idea but before using a plugin i decided to check again the documentation.
After reviewing it i had to remove the build.rollupOptions.output.path because i already have build.outDir set.

But i still dont understand why if i have this alias:

resolve: {
        alias: {
            "@electron/": path.resolve(__dirname, "dist-electron") 
            // I also tried this:          
            // "@electron/": path.resolve(__dirname, "../../dist-electron")           
            // "@electron": "dist-electron"
        }
    },

the output files have imports like this:

import { I18nService, Lang } from "@electron/services";

instead of

import { I18nService, Lang } from "../../dist-electron/services";

Aren't aliases supposed to be replaced by their values ​​during transpilation?

[Celtic-Bytes]

Apparently, when you mark a module as 'external' , Vite no longer allows you to configure anything about the paths related to that module. So if you're working on an electron app, you either duplicate the code by including it inside the Vite bundle ( removing external option), or you have to create a plugin to manipulate manually the imports path.