Avoid using wildcard imports JS-C1003
Anti-pattern
Minor
6 months ago
—
6 months old
Explicitly import the specific method needed
1import React from 'react'
2import ReactDOM from 'react-dom'
3import App from './App'
4import * as serviceWorkerRegistration from './serviceWorkerRegistration' 5import { onServiceWorkerUpdate } from '@3m1/service-worker-updater'
6
7// Render the App
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);
}