eslint-plugin-import

.eslintrc

@@ -12,7 +12,8 @@
     "prettier",
     "plugin:array-func/all",
     "plugin:css-modules/recommended",
-    "plugin:sonarjs/recommended"
+    "plugin:sonarjs/recommended",
+    "plugin:import/typescript"
   ],
   "globals": {
     "Atomics": "readonly",
@@ -48,6 +49,10 @@
         { "name": "Link", "linkAttribute": "to" },
         { "name": "NavLink", "linkAttribute": "to" }
       ]
+    },
+    "import/resolver": {
+      "typescript": true,
+      "webpack": true
     }
   },
   "plugins": [
@@ -61,7 +66,8 @@
     "css-modules",
     "sonarjs",
     "jsx-expressions",
-    "github"
+    "github",
+    "import"
   ],
   "reportUnusedDisableDirectives": true,
   "rules": {
@@ -305,7 +311,13 @@
     "github/array-foreach": "error",
     "github/async-currenttarget": "error",
     "github/async-preventdefault": "error",
-    "github/no-innerText": "error"
+    "github/no-innerText": "error",
+    "import/no-named-as-default": "error",
+    "import/no-named-as-default-member": "error",
+    "import/no-cycle": "error",
+    "import/dynamic-import-chunkname": "error",
+    "import/no-duplicates": "error",
+    "import/no-named-default": "error"
   },
   "overrides": [
     {

.vscode/dim.code-snippets

@@ -38,10 +38,10 @@
     "scope": "javascriptreact,typescriptreact"
   },
 
-  "import clsx": {
+  "import { clsx }": {
     "prefix": "imc",
-    "body": ["import clsx from 'clsx';"],
-    "description": "Import clsx",
+    "body": ["import { clsx } from 'clsx';"],
+    "description": "import { clsx }",
     "scope": "javascriptreact,typescriptreact"
   },
 
@@ -50,5 +50,5 @@
     "body": ["import styles from './$TM_FILENAME_BASE.m.scss';"],
     "description": "Import CSS module",
     "scope": "javascriptreact,typescriptreact"
-  },
+  }
 }

package.json

@@ -128,9 +128,12 @@
     "css-modules-typescript-loader": "^4.0.0",
     "eslint": "^8.3.0",
     "eslint-config-prettier": "^8.1.0",
+    "eslint-import-resolver-typescript": "^3.5.5",
+    "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-plugin-array-func": "^3.1.7",
     "eslint-plugin-css-modules": "^2.11.0",
     "eslint-plugin-github": "^4.6.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-jsx-expressions": "^1.3.1",
     "eslint-plugin-lodash": "^7.1.0",

src/Index.tsx

@@ -12,7 +12,7 @@ import { lazyLoadStreamDeck, startStreamDeckConnection } from 'app/stream-deck/s
 import { streamDeckEnabled } from 'app/stream-deck/util/local-storage';
 import { infoLog } from 'app/utils/log';
 import { scheduleMemoryMeasurement } from 'app/utils/measure-memory';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import idbReady from 'safari-14-idb-fix';
 import { StorageBroken, storageTest } from './StorageTest';
@@ -42,7 +42,7 @@ scheduleMemoryMeasurement();
 const i18nPromise = initi18n();
 
 (async () => {
-  const root = ReactDOM.createRoot(document.getElementById('app')!);
+  const root = createRoot(document.getElementById('app')!);
 
   // idbReady works around a bug in Safari 14 where IndexedDB doesn't initialize sometimes
   await idbReady();

src/app/App.tsx

@@ -1,7 +1,7 @@
 import { settingSelector } from 'app/dim-api/selectors';
 import { RootState } from 'app/store/types';
-import clsx from 'clsx';
-import React, { Suspense } from 'react';
+import { clsx } from 'clsx';
+import { Suspense, lazy } from 'react';
 import { useSelector } from 'react-redux';
 import { Navigate, Route, Routes, useLocation } from 'react-router';
 import styles from './App.m.scss';
@@ -24,13 +24,11 @@ import Privacy from './shell/Privacy';
 import ScrollToTop from './shell/ScrollToTop';
 import SneakyUpdates from './shell/SneakyUpdates';
 
-const WhatsNew = React.lazy(
-  () => import(/* webpackChunkName: "whatsNew" */ './whats-new/WhatsNew')
-);
-const SettingsPage = React.lazy(
+const WhatsNew = lazy(() => import(/* webpackChunkName: "whatsNew" */ './whats-new/WhatsNew'));
+const SettingsPage = lazy(
   () => import(/* webpackChunkName: "settings" */ './settings/SettingsPage')
 );
-const SearchHistory = React.lazy(
+const SearchHistory = lazy(
   () => import(/* webpackChunkName: "searchHistory" */ './search/SearchHistory')
 );
 

src/app/accounts/Account.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { AppIcon } from '../shell/icons';
 import styles from './Account.m.scss';
 import { DestinyAccount, PLATFORM_ICONS } from './destiny-account';

src/app/accounts/MenuAccounts.tsx

@@ -1,7 +1,7 @@
 import { t } from 'app/i18next-t';
 import { accountRoute } from 'app/routes';
 import { useThunkDispatch } from 'app/store/thunk-dispatch';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import _ from 'lodash';
 import React from 'react';
 import { useSelector } from 'react-redux';

src/app/armory/Armory.tsx

@@ -1,4 +1,4 @@
 import ItemGrid from 'app/armory/ItemGrid';
 import { addCompareItem } from 'app/compare/actions';
 import BungieImage, { bungieNetPath } from 'app/dim-ui/BungieImage';
 import { DestinyTooltipText } from 'app/dim-ui/DestinyTooltipText';
@@ -27,7 +27,7 @@
 import { useIsPhonePortrait } from 'app/shell/selectors';
 import { useThunkDispatch } from 'app/store/thunk-dispatch';
 import { getItemYear } from 'app/utils/item-utils';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { D2EventInfo } from 'data/d2/d2-event-info';
 import { ItemCategoryHashes } from 'data/d2/generated-enums';
 import { useSelector } from 'react-redux';

src/app/character-tile/CharacterHeaderXP.tsx

@@ -1,7 +1,7 @@
 import { t } from 'app/i18next-t';
 import { D1ProgressionHashes } from 'app/search/d1-known-values';
 import { percent } from 'app/shell/formatters';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { PressTip } from '../dim-ui/PressTip';
 import { D1Store } from '../inventory/store-types';
 import styles from './CharacterHeaderXP.m.scss';

src/app/character-tile/CharacterTile.tsx

@@ -4,7 +4,7 @@ import { AppIcon, powerActionIcon } from 'app/shell/icons';
 import { useIsPhonePortrait } from 'app/shell/selectors';
 import VaultCapacity from 'app/store-stats/VaultCapacity';
 import { RootState } from 'app/store/types';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { FontGlyphs } from 'data/d2/d2-font-glyphs';
 import { memo } from 'react';
 import { useSelector } from 'react-redux';

src/app/character-tile/CharacterTileButton.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { DimStore } from '../inventory/store-types';
 import CharacterTile from './CharacterTile';
 import './StoreHeading.scss';

src/app/character-tile/StoreHeading.tsx

@@ -1,9 +1,9 @@
 import { t } from 'app/i18next-t';
 import { isD1Store } from 'app/inventory/stores-helpers';
 import LoadoutPopup from 'app/loadout/loadout-menu/LoadoutPopup';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React, { useCallback, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 import ClickOutside from '../dim-ui/ClickOutside';
 import { DimStore } from '../inventory/store-types';
 import { AppIcon, kebabIcon } from '../shell/icons';
@@ -86,7 +86,7 @@ export default function StoreHeading({ store, selectedStore, loadoutMenuRef, onT
     );
 
     loadoutMenu = loadoutMenuRef
-      ? ReactDOM.createPortal(menuContents, loadoutMenuRef.current!)
+      ? createPortal(menuContents, loadoutMenuRef.current!)
       : menuContents;
   }
 

src/app/character-tile/StoreIcon.tsx

@@ -1,6 +1,6 @@
 import ClassIcon from 'app/dim-ui/ClassIcon';
 import { DimStore } from 'app/inventory/store-types';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import styles from './StoreIcon.m.scss';
 
 /**

src/app/clarity/descriptions/ClarityDescriptions.tsx

@@ -1,7 +1,7 @@
 import { languageSelector } from 'app/dim-api/selectors';
 import ExternalLink from 'app/dim-ui/ExternalLink';
 import { t } from 'app/i18next-t';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { useSelector } from 'react-redux';
 /* eslint-disable css-modules/no-unused-class */
 import styles from './Description.m.scss';

src/app/compare/Compare.tsx

@@ -9,7 +9,7 @@
 } from 'app/inventory/store/override-sockets';
 import { recoilValue } from 'app/item-popup/RecoilStat';
 import { useD2Definitions } from 'app/manifest/selectors';
 import { statLabels } from 'app/organizer/Columns';
 import { weaponMasterworkY2SocketTypeHash } from 'app/search/d2-known-values';
 import Checkbox from 'app/settings/Checkbox';
 import { useSetting } from 'app/settings/hooks';
@@ -18,7 +18,7 @@
 import { useThunkDispatch } from 'app/store/thunk-dispatch';
 import { emptyArray } from 'app/utils/empty';
 import { DestinyDisplayPropertiesDefinition } from 'bungie-api-ts/destiny2';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { StatHashes } from 'data/d2/generated-enums';
 import _ from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -28,7 +28,7 @@
 import { DimItem, DimSocket } from '../inventory/item-types';
 import { chainComparator, compareBy, reverseComparator } from '../utils/comparators';
 import styles from './Compare.m.scss';
 import CompareItem from './CompareItem';
 import CompareSuggestions from './CompareSuggestions';
 import { endCompareSession, removeCompareItem, updateCompareQuery } from './actions';
 import { CompareSession } from './reducer';

src/app/compare/CompareItem.tsx

@@ -9,7 +9,7 @@
 import { useThunkDispatch } from 'app/store/thunk-dispatch';
 import { useSetCSSVarToHeight } from 'app/utils/hooks';
 import { isD1Item } from 'app/utils/item-utils';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import _ from 'lodash';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { useSelector } from 'react-redux';
@@ -19,7 +19,7 @@
 import ItemSockets from '../item-popup/ItemSockets';
 import ItemTalentGrid from '../item-popup/ItemTalentGrid';
 import { AppIcon, faArrowCircleDown, searchIcon, shoppingCart } from '../shell/icons';
 import { StatInfo } from './Compare';
 import styles from './CompareItem.m.scss';
 import CompareStat from './CompareStat';
 

src/app/destiny1/activities/Activities.tsx

@@ -5,7 +5,7 @@ import { useD1Definitions } from 'app/manifest/selectors';
 import Objective from 'app/progress/Objective';
 import { usePageTitle } from 'app/utils/hooks';
 import { StringLookup } from 'app/utils/util-types';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import _ from 'lodash';
 import { useSelector } from 'react-redux';
 import { DestinyAccount } from '../../accounts/destiny-account';

src/app/destiny1/loadout-builder/D1LoadoutBuilder.tsx

@@ -14,7 +14,7 @@ import { DestinyClass } from 'bungie-api-ts/destiny2';
 import { ItemCategoryHashes } from 'data/d2/generated-enums';
 import { produce } from 'immer';
 import _ from 'lodash';
-import React from 'react';
+import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import CharacterSelect from '../../dim-ui/CharacterSelect';
 import CollapsibleTitle from '../../dim-ui/CollapsibleTitle';
@@ -121,7 +121,7 @@ const initialState: State = {
   },
 };
 
-class D1LoadoutBuilder extends React.Component<Props, State> {
+class D1LoadoutBuilder extends Component<Props, State> {
   state: State = initialState;
 
   private cancelToken: { cancelled: boolean } = {

src/app/destiny1/loadout-builder/ExcludeItemsDropTarget.tsx

@@ -1,5 +1,5 @@
 import { D1BucketHashes } from 'app/search/d1-known-values';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { BucketHashes } from 'data/d2/generated-enums';
 import React from 'react';
 import { useDrop } from 'react-dnd';

src/app/destiny1/loadout-builder/LoadoutBuilderDropTarget.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React from 'react';
 import { useDrop } from 'react-dnd';
 import { DimItem } from '../../inventory/item-types';

src/app/destiny1/loadout-builder/LoadoutBuilderLocksDialog.tsx

@@ -1,5 +1,5 @@
 import { useShiftHeld } from 'app/utils/hooks';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React from 'react';
 import BungieImage from '../../dim-ui/BungieImage';
 import ClickOutside from '../../dim-ui/ClickOutside';

src/app/destiny1/loadout-drawer/Buttons.tsx

@@ -1,5 +1,5 @@
 import { addIcon, AppIcon } from 'app/shell/icons';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import styles from './Buttons.m.scss';
 
 interface AddButtonProps {

src/app/destiny1/loadout-drawer/LoadoutDrawerBucket.tsx

@@ -2,7 +2,7 @@ import 'app/inventory-page/StoreBucket.scss';
 import { InventoryBucket } from 'app/inventory/inventory-buckets';
 import { ResolvedLoadoutItem } from 'app/loadout-drawer/loadout-types';
 import { addIcon, AppIcon } from 'app/shell/icons';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { BucketHashes } from 'data/d2/generated-enums';
 import _ from 'lodash';
 import React from 'react';

src/app/destiny1/loadout-drawer/LoadoutDrawerOptions.tsx

@@ -10,7 +10,7 @@ import {
 import { Loadout } from 'app/loadout-drawer/loadout-types';
 import { uniqBy } from 'app/utils/util';
 import { DestinyClass } from 'bungie-api-ts/destiny2';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { createSelector } from 'reselect';

src/app/destiny1/record-books/RecordBooks.tsx

@@ -5,7 +5,7 @@ import { useD1Definitions } from 'app/manifest/selectors';
 import { useSetting } from 'app/settings/hooks';
 import { usePageTitle } from 'app/utils/hooks';
 import { DestinyObjectiveProgress } from 'bungie-api-ts/destiny2';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import _ from 'lodash';
 import React from 'react';
 import { useSelector } from 'react-redux';

src/app/destiny1/vendors/D1VendorItem.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import BungieImage from '../../dim-ui/BungieImage';
 import { VendorItemDisplay } from '../../vendors/VendorItemComponent';
 import styles from './D1VendorItem.m.scss';

src/app/dim-ui/AlertIcon.tsx

@@ -1,5 +1,5 @@
 import { AppIcon, faExclamationTriangle } from 'app/shell/icons';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import styles from './AlertIcon.m.scss';
 
 export function AlertIcon({ className, title }: { className?: string; title?: string }) {

src/app/dim-ui/BungieImage.tsx

@@ -1,5 +1,5 @@
-import clsx from 'clsx';
-import React from 'react';
+import { clsx } from 'clsx';
+import React, { memo } from 'react';
 
 /**
  * A relative path to a Bungie.net image asset.
@@ -13,7 +13,7 @@ export type BungieImageProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, '
 /**
  * An image tag that links its src to bungie.net. Other props pass through to the underlying image.
  */
-export default React.memo(function BungieImage(props: BungieImageProps) {
+export default memo(function BungieImage(props: BungieImageProps) {
   const { src, ...otherProps } = props;
   return (
     <img

src/app/dim-ui/CharacterSelect.tsx

@@ -1,7 +1,7 @@
 import { hideItemPopup } from 'app/item-popup/item-popup';
 import { useIsPhonePortrait } from 'app/shell/selectors';
 import { infoLog } from 'app/utils/log';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { animate, motion, PanInfo, Spring, useMotionValue, useTransform } from 'framer-motion';
 import _ from 'lodash';
 import { useEffect, useRef } from 'react';

src/app/dim-ui/CheckButton.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './CheckButton.m.scss';
 import Switch from './Switch';

src/app/dim-ui/ClassIcon.tsx

@@ -1,7 +1,7 @@
 import { AppIcon, globeIcon, hunterIcon, titanIcon, warlockIcon } from 'app/shell/icons';
-import dimHunterProportionalIcon from 'app/shell/icons/custom/HunterProportional';
-import dimTitanProportionalIcon from 'app/shell/icons/custom/TitanProportional';
-import dimWarlockProportionalIcon from 'app/shell/icons/custom/WarlockProportional';
+import { dimHunterProportionalIcon } from 'app/shell/icons/custom/HunterProportional';
+import { dimTitanProportionalIcon } from 'app/shell/icons/custom/TitanProportional';
+import { dimWarlockProportionalIcon } from 'app/shell/icons/custom/WarlockProportional';
 import { DestinyClass } from 'bungie-api-ts/destiny2';
 
 const classIcons = {

src/app/dim-ui/ClickOutside.tsx

@@ -1,8 +1,15 @@
 import { useEventBusListener } from 'app/utils/hooks';
 import { EventBus } from 'app/utils/observable';
-import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import React, {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
 
-export const ClickOutsideContext = React.createContext(new EventBus<React.MouseEvent>());
+export const ClickOutsideContext = createContext(new EventBus<React.MouseEvent>());
 
 type Props = React.HTMLAttributes<HTMLDivElement> & {
   children: React.ReactNode;
@@ -18,7 +25,7 @@ type Props = React.HTMLAttributes<HTMLDivElement> & {
  * React DOM hierarchy rather than the real one. This is important for things like sheets
  * spawned through portals from the item popup.
  */
-export default React.forwardRef<HTMLDivElement, Props>(function ClickOutside(
+export default forwardRef<HTMLDivElement, Props>(function ClickOutside(
   { onClickOutside, children, extraRef, onClick, ...other },
   ref
 ) {

src/app/dim-ui/ClosableContainer.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './ClosableContainer.m.scss';