Comfy-Org / Comfy-Org/ComfyUI_frontend
Align ESLint import resolution and lint scripts for apps/desktop-ui
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
## Summary
In the `apps/desktop-ui` project, ESLint import resolution and the main lint scripts don’t fully line up with how Vite/TypeScript resolve modules. This causes false-positive `import-x/no-unresolved` errors for `@`-aliased imports in the desktop app, and also means `pnpm lint` / `pnpm lint:fix` do not apply to `apps/desktop-ui/src`, so autofixable issues there aren’t fixed by the main lint commands.
## Details
### 1. ESLint import resolver vs desktop `@` alias
- Vite for `apps/desktop-ui` defines `@` as `apps/desktop-ui/src` via `apps/desktop-ui/vite.config.mts`:
```ts
resolve: {
alias: {
'@': path.resolve(projectRoot, 'src'),
'@frontend-locales': path.resolve(projectRoot, '../../src/locales')
}
}
```
- `apps/desktop-ui/tsconfig.json` also defines:
```json
"paths": {
"@/*": ["./src/*"],
"@frontend-locales/*": ["../../src/locales/*"]
}
```
- The root `tsconfig.json` defines `@/*` as `./src/*` for the main frontend:
```json
"paths": {
"@/*": ["./src/*"],
"@/utils/formatUtil": ["./packages/shared-frontend-utils/src/formatUtil.ts"],
"@/utils/networkUtil": ["./packages/shared-frontend-utils/src/networkUtil.ts"],
"@tests-ui/*": ["./tests-ui/*"]
}
```
- ESLint uses `eslint-import-resolver-typescript` via `import-x` with:
```ts
const settings = {
'import-x/resolver-next': [
createTypeScriptImportResolver({
alwaysTryTypes: true,
project: [
'./tsconfig.json',
'./apps/*/tsconfig.json',
'./packages/*/tsconfig.json'
],
noWarnOnMultipleProjects: true
})
],
// ...
}
```
- In practice, for files under `apps/desktop-ui/src`, the resolver appears to use the root `tsconfig.json`’s `@/* -> ./src/*` mapping when checking imports, instead of the desktop app’s `@/* -> ./src/*` mapping.
- Example from `apps/desktop-ui/src/components/install/InstallLocationPicker.vue`:
```ts
import MigrationPicker from '@/components/install/MigrationPicker.vue'
import MirrorItem from '@/components/install/mirror/MirrorItem.vue'
```
ESLint reports:
```
apps/desktop-ui/src/components/install/InstallLocationPicker.vue
122:29 error Unable to resolve path to module '@/components/install/MigrationPicker.vue' import-x/no-unresolved
123:24 error Unable to resolve path to module '@/components/install/mirror/MirrorItem.vue' import-x/no-unresolved
```
- These files exist under `apps/desktop-ui/src/components/install/...`, and Vite/TS resolve them correctly. The false-positive happens because ESLint is effectively looking for them under the root `src/components/...` instead.
- As a local workaround, the imports were changed to relative paths:
```ts
import MigrationPicker from './MigrationPicker.vue'
import MirrorItem from './mirror/MirrorItem.vue'
```
This clears the ESLint errors but sidesteps the underlying resolver mismatch.
### 2. `pnpm lint` / `pnpm lint:fix` ignore `apps/desktop-ui/src`
- Root `package.json` defines:
```json
"scripts": {
"lint:fix": "oxlint src --type-aware --fix && eslint src --cache --fix",
"lint": "oxlint src --type-aware && eslint src --cache",
// ...
}
```
- Both scripts only target the root `src` directory. They do not include `apps/desktop-ui/src`, so errors and autofixable issues in the desktop app are not touched by the main lint commands.
- This is visible in practice: running `pnpm lint:fix` did not fix the autofixable `import-x/no-unresolved` problems in `apps/desktop-ui/src/components/install/InstallLocationPicker.vue` until the imports were manually updated. (Those files simply were not in the lint scope.)
- There is a separate Nx lint target configured for the desktop app in `apps/desktop-ui/package.json`, but the top-level `pnpm lint` / `pnpm lint:fix` scripts (used as general quality gates) don’t currently cover that project.
## Impact
- Developers working in `apps/desktop-ui` see false-positive `no-unresolved` errors for valid `@/...` imports.
- `pnpm lint` / `pnpm lint:fix` do not enforce or autofix ESLint/oxlint rules for the desktop UI code, leading to inconsistent lint coverage between the main frontend and the desktop app.
## Proposed improvements
1. **Align ESLint import resolution with Vite/TS for `apps/desktop-ui`:**
- Ensure that when ESLint resolves imports for files under `apps/desktop-ui/**`, it preferentially uses `apps/desktop-ui/tsconfig.json` (and its `@/* -> ./src/*` mapping) instead of the root `tsconfig.json`.
- Alternatively, introduce a distinct alias for the desktop app, e.g. `@desktop/*`:
- In `apps/desktop-ui/tsconfig.json` and `vite.config.mts`, map `@desktop/*` to `apps/desktop-ui/src/*`.
- Update imports in the desktop app to use `@desktop/...` instead of `@/...`.
- Configure `eslint-import-resolver-typescript` / `import-x` so `@desktop/*` resolves correctly.
2. **Extend lint scripts to cover `apps/desktop-ui/src`:**
- Update root lint scripts to include the desktop app, e.g.:
```json
"lint": "oxlint src apps/desktop-ui/src --type-aware && eslint src apps/desktop-ui/src --cache",
"lint:fix": "oxlint src apps/desktop-ui/src --type-aware --fix && eslint src apps/desktop-ui/src --cache --fix"
```
- Or, use Nx to orchestrate lint across all projects (including the desktop app) from a single `pnpm lint` command.
## Current workaround
- For now, the two problematic imports in `InstallLocationPicker.vue` have been converted to relative imports, which removes the immediate ESLint errors. However, a structural fix is still desirable so that:
- `@/...` imports in `apps/desktop-ui` can be used consistently without false positives.
- `pnpm lint` / `pnpm lint:fix` provide full lint coverage across both the main frontend and the desktop app.
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-6746-Align-ESLint-import-resolution-and-lint-scripts-for-apps-desktop-ui-2b06d73d365081f189f5d8237ab0876d) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.