Generated imports are changing the order on build / next dev

[Rashair]

The order of these 2 import swaps when I run next dev and next build

It causes unnecessary changes visible in git repo - is there a way to prevent it?

[tatethurston]

Hey @Rashair what tool are you using to reorganize imports? ESLint and prettier are ignored for the generated file.

[Rashair]

I don't use anything else than eslint. I have a plugin for imports reordering: eslintr.yml:

extends:
  - eslint:recommended
  - plugin:import/recommended
  - plugin:import/typescript
  - plugin:react-hooks/recommended
  - next
globals: {
  React: true,
  jsdom: true,
  JSX: true,
}

rules:
  quotes: [ "error", "double", { "avoidEscape": true, "allowTemplateLiterals": true } ]
  sort-imports: "off"
  import/order: [
    "warn", {
      "groups": [ "external", "builtin", "object", "type", "index", "sibling", "parent", "internal" ],
      "newlines-between": "always",
      "warnOnUnassignedImports": true,
    } ]
  react-hooks/rules-of-hooks: "error"
  react-hooks/exhaustive-deps: "warn"
  react/no-unescaped-entities: [ error, { forbid: [ ">", "}" ] } ]
  react/display-name: "off"
  no-unused-vars: "warn"

[tatethurston]

@Rashair I'm not able to reproduce this with a minimal project starter, the imports are unchanged across next dev and next build: https://stackblitz.com/edit/nextjs-yzc5rj?file=nextjs-routes.d.ts.

Could you share a repo that reproduces this?

[Rashair]

I've tried few things here: https://stackblitz.com/edit/nextjs-vwcudh?file=types/nextjs-routes.d.ts But nothing seemed to work 🤔

Ultimately I've committed the change again and I've noticed that my IDE (Rider) is doing the rearrangement 🙈 I had optimize imports on commit option turned on, which didn't respect the eslitnt-ignore tag. Solution was to commit the file via git directly which left it untouched.

[tatethurston]

Ah that makes sense, thanks for reporting back. Hopefully Rider has an ignore list you can add autogenerated files like nextjs-routes.d.ts to? Alternatively if there are comment ignore directives for Rider I'd be curious what they use.

[josepdecid]

I'm late to the topic, but I have the same problem. If it is generated every time you do npm dev or npm build, can there be any problem if we add it to .gitignore? That way it doesn't detect changes in each commit and when someone runs it locally or build or whatever, the file will be generated in that environment.

[tatethurston]

You probably don’t want to gitignore the file because you need it to type check and provide code completion — the expected flow is to check any updates from route changes in with the change PR.

The file will only change when there are route changes.