fix: function overloading shadows the original implementation

__tests__/useImported.spec.tsx

@@ -4,13 +4,13 @@ import * as React from 'react';
 import { useEffect, useState } from 'react';
 
 import { act } from 'react-dom/test-utils';
-import { drainHydrateMarks } from '../src/entrypoints';
+import { DefaultImport, drainHydrateMarks } from '../src/entrypoints';
 import { getLoadable } from '../src/loadable/loadable';
 import { done } from '../src/loadable/pending';
 import { toLoadable } from '../src/loadable/toLoadable';
 import { useImported } from '../src/ui/useImported';
 
-const importedWrapper = (_: any, b: any) => b;
+const importedWrapper = <T extends any>(_: any, b: T): T => b;
 
 jest.mock('../src/utils/detectBackend', () => ({ isBackend: false }));
 
@@ -124,6 +124,34 @@ describe('useImported', () => {
     // expect().toEqual(['unconditional-mark']);
   });
 
+  it('named import', async () => {
+    const importer = () =>
+      importedWrapper('imported_unconditional-mark_component', Promise.resolve({ named: () => <span>loaded!</span> }));
+
+    const Comp = () => {
+      const { loading, imported: Component } = useImported(importer, ({ named }) => named);
+
+      if (Component) {
+        return <Component />;
+      }
+
+      if (loading) {
+        return <span>loading</span>;
+      }
+      return <span>nothing</span>;
+    };
+
+    const wrapper = mount(<Comp />);
+    expect(wrapper.html()).toContain('loading');
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(wrapper.update().html()).toContain('loaded!');
+    expect(drainHydrateMarks()).toEqual(['unconditional-mark']);
+  });
+
   it('unconditional import', async () => {
     const importer = () =>
       importedWrapper('imported_unconditional-mark_component', Promise.resolve(() => <span>loaded!</span>));
@@ -227,7 +255,7 @@ describe('useImported', () => {
     const importer = () => () => <span>loaded!</span>;
 
     const Comp = () => {
-      const { loading, imported: Component } = useImported(importer as any);
+      const { loading, imported: Component } = useImported((importer as any) as DefaultImport<React.FC>);
 
       if (Component) {
         return <Component />;

src/ui/useImported.ts

@@ -125,7 +125,7 @@ export function useLoadable<T>(loadable: Loadable<T>, options: HookOptions = {})
  */
 export function useImported<T>(importer: DefaultImport<T> | Loadable<T>): ImportedShape<T>;
 /**
- * The code splitting hook
+ * The code splitting hook, the full version
  * @param {Function} importer - an function with `import` inside it
  * @param {Function} [exportPicker] - a "picker" of the export inside
  * @param {HookOptions} options
@@ -139,9 +139,11 @@ export function useImported<T>(importer: DefaultImport<T> | Loadable<T>): Import
  *  - loadable: the under laying reference
  *  - retry: retry if case of failure
  *
- *  @see if you dont need precise control consider(and loading Components) {@link useLazy}
+ * @see if you dont need precise control consider(and loading Components) {@link useLazy}
  *
- *  @example
+ * @example
+ *  const { imported: Imported, loadable } = useImported(importer, ({namedExport} => namedExport);
+ * @example
  *  const { imported: Imported, loadable } = useImported(importer);
  *  if (Imported) {
  *    // yep, it's imported
@@ -152,7 +154,13 @@ export function useImported<T>(importer: DefaultImport<T> | Loadable<T>): Import
  */
 export function useImported<T, K = T>(
   importer: DefaultImport<T> | Loadable<T>,
-  exportPicker: (x: T) => K = es6import,
+  exportPicker: undefined | ((x: T) => K),
+  options?: HookOptions
+): ImportedShape<K>;
+
+export function useImported<T, K = T>(
+  importer: DefaultImport<T> | Loadable<T>,
+  exportPicker: undefined | ((x: T) => K) = es6import,
   options: HookOptions = {}
 ): ImportedShape<K> {
   const topLoadable = getLoadable(importer);