`import()` type annotations are forbidden

Question

I am using XState on the backend and per the XState docs, I added type annotation to my state machine's config:

export const machine = createMachine(
    {
      tsTypes: {} as import("./testMachine.server.typegen").Typegen0,
    ...,
    }

However, the type cast is throwing this error:

`import()` type annotations are forbidden.eslint@typescript-eslint/consistent-type-imports
interface Typegen0

I looked into dynamic imports, but that doesn't seem to fix the issue:

const dynamicImport = async() => await import("./testMachine.server.typegen")

This is from my eslint.

Answer 1

It says you MUST import types as

import type { Typegen0 } from "./testMachine.server.typegen"
export const machine = createMachine(
    {
      tsTypes: {} as Typegen0,
    ...,
    }

You can read more in the documentation: https://typescript-eslint.io/rules/consistent-type-imports/#prefer

Answer 2

It seems like it is just a linting error. Your eslint config expects a certain way of importing types. I would assume the type inference and your code still works.

You can disable the linting error by putting an ignore comment directly above the line with the error. I am not sure if I got the comment 100% right, but sth in that direction should disable the error.

// eslint-disable-next-line @typescript-eslint/consistent-type-imports
// @ts-ignore

Otherwise, you can also use the import syntax of this answer or adjust your eslint config accordingly.

Btw, I assume await is never needed for importing types.

Answer 3

Using import() for typing is forbidden by default in the consistent-type-imports eslint rule, but you can just allow it by setting disallowTypeAnnotations to false in your .eslintrc.json rules section:

{
  "rules": {
    "@typescript-eslint/consistent-type-imports": ["error", {
      "disallowTypeAnnotations": false
    }],
...