import-js / eslint-plugin-import

ESLint plugin with rules that help validate proper imports.
MIT License
5.57k stars 1.57k forks source link

Possible false positive import/namespace error on exported type #3019

Open corydeppen opened 5 months ago

corydeppen commented 5 months ago

I'm seeing the following ESLint error when trying to use a namespace import for React Aria Components. I'm unsure whether this could be related to the config in the default .eslintrc.cjs file of the Remix template or if it might be a false positive being reported. ButtonProps is being exported by the RAC module, so it's confusing why this error would be shown.

'ButtonProps' not found in imported namespace 'ReactAria'. eslint(import/namespace)
import * as ReactAria from "react-aria-components";

// ...

export interface ButtonProps
  extends ReactAria.ButtonProps,
    VariantProps<typeof buttonVariants> {}

// ...

The error is not reported when I use the namespace import for exports that aren't types:

<ReactAria.Button {...props} />

Running npm run lint in the example app will show the error mentioned above.

Any ideas what might be happening here and whether this is expected or not?

ljharb commented 5 months ago

If the import works, I'd expect the plugin to recognize it. What happens if you do import { ButtonProps } from 'react-aria-components'?

corydeppen commented 5 months ago

There's no error when aliases are used.

import {
  Button as RacButton,
  ButtonProps as RacButtonProps,
} from 'react-aria-components';
ljharb commented 5 months ago

With no aliases, but also with no *?

corydeppen commented 5 months ago

No lint errors without aliases or * - I've updated the example.

corydeppen commented 5 months ago

I'm not sure whether it helps narrow down the issue or not, but I noticed the lint error only seems to be thrown when the namespace import is used to extend a type but not when it's used as an annotation. This can be seen in the label module I just added to the example app.