Electron-Vite fails to resolve alias path during "vite" task only - Stack Overflow

admin管理员组

文章数量:1297029

I setup a mono repo with the following structure:

front-end

• apps
  • desktop-app (An electron app created by electron-vite scaffolding)
  • webapp (A mininal web app created by nx application scaffolding)
• packages
  • shift-management (A react component library created by nx library scaffolding)

The alias path could be resolved correctly if I build the project using "pnpm run build" and run the output exe file.

// package.json snippet

  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build && electron-builder",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },

However, if I want to use dev server by running "pnpm run dev", it will always throw out the following error during runtime. Why does vite with dev server doesn't recognize this alias path?

Error message electron project setup

I did configure both the tsconfig.json and vite.config.ts as specified in this tutorial:

// baseurl and paths created inside tsconfig.json
    "baseUrl": ".",
    "paths": {
      "@": ["."],
      "@hf-shift-management": ["packages/shift-management/src/index.ts"]
    }

// alias created isnide vite.config.ts
  resolve: {
    alias: {
      "@hf-shift-management": "../../packages/shift-management/src/index
    }
  }

I have tried the following:

1. I replaced the import path @hf-shift-management with absolute path, the "vite" command succeed with dev server in runtime. This indicates that this is truly an alias issue
2. I created a separate web-app project for debugging purpose. This webapp could successfully resolve the alias during runtime. So it seems to be related to some configuration issue, or maybe electron config issue.

I setup a mono repo with the following structure:

front-end

• apps
  • desktop-app (An electron app created by electron-vite scaffolding)
  • webapp (A mininal web app created by nx application scaffolding)
• packages
  • shift-management (A react component library created by nx library scaffolding)

The alias path could be resolved correctly if I build the project using "pnpm run build" and run the output exe file.

// package.json snippet

  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build && electron-builder",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },

However, if I want to use dev server by running "pnpm run dev", it will always throw out the following error during runtime. Why does vite with dev server doesn't recognize this alias path?

Error message electron project setup

I did configure both the tsconfig.json and vite.config.ts as specified in this tutorial: https://dev.to/tilly/aliasing-in-vite-w-typescript-1lfo

// baseurl and paths created inside tsconfig.json
    "baseUrl": ".",
    "paths": {
      "@": ["."],
      "@hf-shift-management": ["packages/shift-management/src/index.ts"]
    }

// alias created isnide vite.config.ts
  resolve: {
    alias: {
      "@hf-shift-management": "../../packages/shift-management/src/index
    }
  }

I have tried the following:

1. I replaced the import path @hf-shift-management with absolute path, the "vite" command succeed with dev server in runtime. This indicates that this is truly an alias issue
2. I created a separate web-app project for debugging purpose. This webapp could successfully resolve the alias during runtime. So it seems to be related to some configuration issue, or maybe electron config issue.

• electron
• vite
• alias

Share Improve this question Follow asked Feb 11 at 18:47 Shijie ZhangShijie Zhang 3966 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

As mentioned in the following post, path alias is an old way for replacing relative imports in monorepos. Path alias are a purely compile-time construct. To run the application, you will need a runtime plugin

With workspace concepts coming in pnpm/yarn/etc, it is recommended to use workspaces + project references as mentioned in the following ost:

https://nx.dev/blog/managing-ts-packages-in-monorepos

本文标签： ElectronVite fails to resolve alias path during quotvitequot task onlyStack Overflow