Linting Error with an enum

[brisk vine]

Hey all,

I'm getting a weird linting error. I converted a type to an enum and ESLint is saying All imports in the declaration are only used as types. Use 'import type'

The thing is, I am not importing a type, I'm importing an enum.

Code snippet:

--- Component.tsx ---

import { DeliveryMethods } from "~/enums/delivery";

<-- Some TSX  -->

---  delivery.ts  ---

export enum DeliveryMethods {
  POST_IN_STORE = "post_in_store",
  POST_REQUEST = "post_request",
  POD = 'Pod'
}

---  .eslintrc.js. ---

/** @type {import('@types/eslint').Linter.BaseConfig} */
module.exports = {
  extends: [
    "@remix-run/eslint-config",
    "@remix-run/eslint-config/node",
    "@remix-run/eslint-config/jest-testing-library",
    "prettier",
  ],
  env: {
    "cypress/globals": true,
  },
  plugins: ["cypress"],
  settings: {
    jest: {
      version: 28,
    },
  },
  ignorePatterns: ["node_modules", "server", "public/build"],
};

[spiral citrus]

how does Component.tsx use DeliveryMethods?

[brisk vine]

It's been used in several places but like so:

  let label = method === DeliveryMethods.POD ? "pod" : "store";

  if (!method) return "";

  if (value > 1) {
    label = `${label}s`;
  }

  if (value > 0) {
    return `(${value} ${label} nearby)`;
  }

  return `(Ah, we don't have ${label} within ${searchRadius} miles yet)`;
}```

[spiral citrus]

hmm, yeah, method === DeliveryMethods.POD is certainly using the value side of the enum

[brisk vine]

Apologies, POD is a value inside, I didn't copy it over

Let me edit

[spiral citrus]

what's the full eslint error message? it should say the name of the lint rule that is being violated

[brisk vine]

All imports in the declaration are only used as types. Use import type

[spiral citrus]

that's it? usually they're more like this:

Unnecessary conditional, both sides of the expression are literal values. eslint@typescript-eslint/no-unnecessary-condition

(with the name of the lint rule at the end)

[brisk vine]

That's it

That's what the terminal is showing

warning All imports in the declaration are only used as types. Use 'import type' @typescript-eslint/consistent-type-imports

That's the full message

[spiral citrus]

ah thank you

[brisk vine]

I did some digging around but can't find anyone else with this issue

I may have not googled the right thing

When we are importing types we are declaring it's a type. For example

import type { SomeType } from '~/types/someType'

[spiral citrus]

right

[brisk vine]

But the enums are in a separate folder

[spiral citrus]

i'm not able to reproduce this. i took a project i have which uses eslint, enable the @typescript-eslint/no-unnecessary-condition rule, and did exactly what you're doing, but it's not complaining

i've never used remix, but assume that it's the one indirectly providing the typescript lint rules?

[brisk vine]

Yeah and all the answers I've found say to do what I did

I am absolutely stumped

Yeah, it could be. That was my thought too

Thanks for having a go, appreciate it

[spiral citrus]

my first guess is that eslint isn't getting type info for some reason. when i've set it up before i've included @typescript-eslint/eslint-plugin and @typescript-eslint/parser in my dependencies. i'm not sure how remix sets things up, but maybe look at their docs to see if you're supposed to do any extra configuration or take on any extra dependencies to get type-aware lints working?