'import/no-cycle' issue

[sshmyg]

Hi After updating eslint and eslint-plugin-import to latest version (eslint 8.5.0, eslint-plugin-import 2.25.3), in VSCode and via terminal also I get errors from the rule import/no-cycle. Nothing was changed, just bumped packages versions. Prev versions was ("eslint": "7.32.0", "eslint-plugin-import": "2.24.2").

Will try to make sandbox project to reproduce the problem.

Some additional info here https://github.com/import-js/eslint-plugin-import/issues/2260

[sshmyg]

With before update versions of packages, there are no any errors about import/no-cycle.

Before update

"@typescript-eslint/eslint-plugin": "4.30.0",
"@typescript-eslint/parser": "4.30.0",
"eslint": "7.32.0",
"eslint-plugin-import": "2.24.2",
"eslint-plugin-jest": "24.4.0",
"eslint-plugin-promise": "5.1.1",
"typescript": "4.4.4",

After update:

"@typescript-eslint/eslint-plugin": "5.8.1",
 "@typescript-eslint/parser": "5.8.1",
"eslint": "8.5.0",
"eslint-plugin-import": "2.25.3",
"eslint-plugin-jest": "25.3.2",
"eslint-plugin-promise": "6.0.0",
"typescript": "4.5.4",

[sshmyg]

Checks with eslint for all project took ~ 5min with old packages versions. With new ones ~ 47min.

[ljharb]

Can you try eslint 7.32.0 with the latest version of the plugin?

[sshmyg]

Can you try eslint 7.32.0 with the latest version of the plugin?

Doesn't work :(

[ljharb]

Ok, hmm - any chance you could figure out the exact plugin version where the problem started?

[sshmyg]

Will try to get more info.

[sshmyg]

Works with this versions

"eslint": "7.32.0",
"eslint-plugin-import": "2.24.2",

Got such error from eslint Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/util/glob-util' is not defined by "exports" in /node_modules/eslint/package.json with versions

"eslint": >="8.0.0",
"eslint-plugin-import": "2.24.2",

Cycle rule errors with versions

"eslint": >="8.0.0",
"eslint-plugin-import": >="2.25.0",

So can assume, cycle issue started with import plugin version 2.25.0.

[ljharb]

Indeed, v2.25 is the first version of the plugin to support eslint 8. I was hoping with eslint 7, you could confirm that v2.25.0 also breaks.

[MartinX3]

Using eslint 7.32.0 2.25.3 was fine Since 2.25.4 I get the error Dependency cycle via @/router:3 (import/no-cycle)

[ljharb]

@MartinX3 and are you sure that's not actually a real cycle being reported?

[MartinX3]

@ljharb Luckily yes. The 2 mentioned static typescript classes don't inject each other.

[ljharb]

@MartinX3 could you provide a repro? ideally a small repo that shows the problem. (not sure what "inject" means; there's no injection in JS around modules, only "function arguments")

[MartinX3]

Login.vue does a

import Fetch from "@/utils/Fetch";
import Session from "@/utils/Session";

Registration.vue does a

import Fetch from "@/utils/Fetch";

Course.vue does a

import Fetch from "@/utils/Fetch";

Session.ts does a

import Fetch from "@/utils/Fetch";

And that's what the issue tells me in the terminal. Downgrading from 2.25.4 back to 2.25.3 fixes the issue. The application works without any problem.

[ljharb]

Do you have a vue eslint parser?

[MartinX3]

From my .eslintrc.js

  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
  },
  plugins: ["@typescript-eslint"],

My JavaScript project is fine

[ljharb]

so, none of those seem like cycles; what's the exact error in your (non-editor) terminal?

[MartinX3]

@ljharb the exact error is

error: Dependency cycle via @/router:5 (import/no-cycle) at src/views/account/checkin/Login.vue:42:1:
  40 | import { Component, Prop } from "vue-property-decorator";
  41 | import ASave from "@/dialogs/crud/ASave";
> 42 | import Fetch from "@/utils/Fetch";
     | ^
  43 | import Session from "@/utils/Session";
  44 | import SessionStorage from "@/utils/SessionStorage";
  45 | import UserAccount from "@/models/entities/user/UserAccount";


error: Dependency cycle via @/utils/Fetch:2=>@/router:5 (import/no-cycle) at src/views/account/checkin/Login.vue:43:1:
  41 | import ASave from "@/dialogs/crud/ASave";
  42 | import Fetch from "@/utils/Fetch";
> 43 | import Session from "@/utils/Session";
     | ^
  44 | import SessionStorage from "@/utils/SessionStorage";
  45 | import UserAccount from "@/models/entities/user/UserAccount";
  46 | 


error: Dependency cycle via @/router:5 (import/no-cycle) at src/views/account/checkin/Registration.vue:48:1:
  46 | import ASave from "@/dialogs/crud/ASave";
  47 | import EHttpStatusCode from "@/models/enums/EHttpStatusCode";
> 48 | import Fetch from "@/utils/Fetch";
     | ^
  49 | import UserAccount from "@/models/entities/user/UserAccount";
  50 | 
  51 | @Component


error: Dependency cycle via @/router:5 (import/no-cycle) at src/views/admin/Course.vue:38:1:
  36 | import ECourseDateType from "@/models/enums/course/date/ECourseDateType";
  37 | import ECourseType from "@/models/enums/course/ECourseType";
> 38 | import Fetch from "@/utils/Fetch";
     | ^
  39 | import ICourseDate from "@/models/entities/course/date/ICourseDate";
  40 | import ICourseDateAdmin from "@/models/entities/admin/course/date/ICourseDateAdmin";
  41 | import ISeminarFSAdmin from "@/models/entities/admin/course/date/ISeminarFSAdmin";


4 errors found.

PS: I use lazy loading in the VueRouter https://router.vuejs.org/guide/advanced/lazy-loading.html component: () => import("@/views/error/Unknown.vue")

[MartinX3]

I fixed it my removing the vue-router import from my TypeScript Utils class with my HTTP-Fetch functions. So I only import the router in my main.ts into the vue object and instead of importing it also in my Utils class, I inject this.$router as a parameter with every function execution.

It makes my code bigger and I wonder if I wrote bad code before or it is a bug in this dependency.

[ljharb]

Is your eslint configured to understand the vue extension?

[MartinX3]

Yes, it lints .vue files

[ljharb]

right, but have you set the import/extensions setting, so that this plugin can look at them?

[MartinX3]

I did not write a "import/extensions". I don't know in which documentation it is written.

The first router import is in the main.ts, the second import, which I removed, was in the Fetch.ts which is imported in .vue files.

[ljharb]

This plugin's readme: https://github.com/import-js/eslint-plugin-import#settings

[sshmyg]

Hi Checked latest version of eslint and import plugin. It works, but very very very slow. Was using .ts file with ~ 300 lines of code. Imports lines ~ 20 lines (not much). Compared also result with versions of eslint and import plugin which using right now in project. Results below.

Latest version of eslint and import plugin. ("eslint": "8.14.0", "eslint-plugin-import": "2.26.0")

• time spent on check 27 sec 🤦‍♂️

Current versions in my project ("eslint": "7.32.0", "eslint-plugin-import": "2.24.2")

• time spent on check 1.5 sec 🥳

OS - macOS Monterey 12.3.1

[MartinX3]

right, but have you set the import/extensions setting, so that this plugin can look at them?

I added it, but still the same issue without my workaround.

If I looked correctly vue already added these imports as well in their ecosystem so it isn't needed anyway by the user to add them.

[ljharb]

This issue has gotten a bit off topic. I'm going to close it.

Those following: please wait until the next release (v2.27.0), and if you're still having troubles after that comes out, please file a new issue with all the details! If you include a repro repo, or make a PR with failing test cases, I can fix your issue much faster. Thanks!