Comfy-Org / Comfy-Org/ComfyUI_frontend

Align ESLint import resolution and lint scripts for apps/desktop-ui

Open
#6,746 0 comments 0 reactions 1 assignee Claimed by @benceruleanlu View on GitHub
developer experience Electron
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.