Explicitly import the specific method needed
1import { Slot } from '@radix-ui/react-slot';
2import { cva, type VariantProps } from 'class-variance-authority';
3import * as React from 'react'; 4
5import { cn } from '@/lib/utils';
6
Description
Wildcard imports are easier to write, but make it harder to pick out the specific functions or objects from a dependency that are used in a file.
import * from 'module';
// there is no clear way to tell if
// `someFunction` has been imported
// from 'module'.
someFunction();
Therefore, it is recommended to explicit imports wherever possible.
NOTE: Some libraries do not expose themselves as ESModules. In cases like these, it is recommended to use a skipcq comment to suppress this issue.
Bad Practice
import * as axios from 'axios'
import * as Sentry from '@sentry/node'
try {
const result = await axios.get();
// ...
} catch (err) {
Sentry.captureException(err);
}
Recommended
import axios from 'axios'
// skipcq: JS-C1003 - sentry does not expose itself as an ES Module.
import * as Sentry from '@sentry/node'
try {
const result = await axios.get();
// ...
} catch (err) {
Sentry.captureException(err);
}