title: Can't import named exports from an external NPM library with TypeScript
body: <p>I'm unable to import named exports from an external component library I've created as it is described in the <a href="https://nextjs.org/docs/advanced-features/dynamic-import" rel="nofollow noreferrer">official documentation</a>. The situation seems to be very niche as I struggle to find anything online that would bring me closer to the solution. Did anyone manage to get it to work?</p>
  
  <p>Here comes the context...</p>
  
  <h2>In my NPM library</h2>
  
  <h3>Component</h3>
  
  <p><strong>Modal component</strong> (fragment)</p>
  
  <pre><code>const Modal: React.FC&lt;ModalProps&gt; = ({ onCancelCallback, children }) =&gt; {...};
  export default Modal;
  </code></pre>
  
  <p>As you can see, I export it as a default from Modal.tsx but later re-export it as a named export in every folder's index.ts file like so:</p>
  
  <pre><code>export { default as Modal } from './Modal';
  </code></pre>
  
  <p>then</p>
  
  <pre><code>export { Modal } from './Modal';
  </code></pre>
  
  <p>and, finally:</p>
  
  <pre><code>export * from './components';
  </code></pre>
  
  <h3>Interface</h3>
  
  <p><strong>ModalProps</strong></p>
  
  <pre><code>export interface ModalProps {
    onCancelCallback?: () =&gt; void;
  }
  </code></pre>
  
  <h2>In Next.js</h2>
  
  <p>Here's how I'm importing my external "Modal" component in one of the Next.js components (not pages):</p>
  
  <p><strong>nextjscomponent.tsx</strong></p>
  
  <pre><code>import dynamic from 'next/dynamic';
  const Modal = dynamic(() =&gt; import('my-ui-kit').then((mod) =&gt; mod.Modal), {
    ssr: false,
  });
  </code></pre>
  
  <p><strong>TypeScript error</strong></p>
  
  <pre class="lang-sh prettyprint-override"><code>Argument of type '() =&gt; Promise&lt;React.ComponentClass&lt;never, any&gt; | React.FunctionComponent&lt;never&gt; | { default: React.ComponentType&lt;never&gt;; } | React.FC&lt;ModalProps&gt;&gt;' is not assignable to parameter of type 'DynamicOptions&lt;{}&gt; | (() =&gt; LoaderComponent&lt;{}&gt;) | LoaderComponent&lt;{}&gt;'.
    Type '() =&gt; Promise&lt;React.ComponentClass&lt;never, any&gt; | React.FunctionComponent&lt;never&gt; | { default: React.ComponentType&lt;never&gt;; } | React.FC&lt;ModalProps&gt;&gt;' is not assignable to type '() =&gt; LoaderComponent&lt;{}&gt;'.
      Type 'Promise&lt;ComponentClass&lt;never, any&gt; | FunctionComponent&lt;never&gt; | { default: ComponentType&lt;never&gt;; } | FC&lt;ModalProps&gt;&gt;' is not assignable to type 'LoaderComponent&lt;{}&gt;'.
        Type 'ComponentClass&lt;never, any&gt; | FunctionComponent&lt;never&gt; | { default: ComponentType&lt;never&gt;; } | FC&lt;ModalProps&gt;' is not assignable to type 'ComponentClass&lt;{}, any&gt; | FunctionComponent&lt;{}&gt; | { default: ComponentType&lt;{}&gt;; }'.
          Type 'ComponentClass&lt;never, any&gt;' is not assignable to type 'ComponentClass&lt;{}, any&gt; | FunctionComponent&lt;{}&gt; | { default: ComponentType&lt;{}&gt;; }'.
            Type 'ComponentClass&lt;never, any&gt;' is not assignable to type 'ComponentClass&lt;{}, any&gt;'.
              Types of property 'getDerivedStateFromProps' are incompatible.
                Type 'GetDerivedStateFromProps&lt;never, any&gt; | undefined' is not assignable to type 'GetDerivedStateFromProps&lt;{}, any&gt; | undefined'.
                  Type 'GetDerivedStateFromProps&lt;never, any&gt;' is not assignable to type 'GetDerivedStateFromProps&lt;{}, any&gt;'.
                    Types of parameters 'nextProps' and 'nextProps' are incompatible.
                      Type 'Readonly&lt;{}&gt;' is not assignable to type 'never'.ts(2345)
  </code></pre>
  
  <h2>Notes</h2>
  
  <ul>
  <li>I'm using Rollup to transpile the contents of "src" folder with component and index files into "dist" folder which ends up with index.cjs.js (for CommonJS), index.esm.js (for ES modules) and a bunch of automatically generated .d.ts files.</li>
  <li>I'm using Yarn link to test the integration of my external library into my Next.js project locally.</li>
  </ul>
  
  <p>Any help is highly appreciated. Thank you in advance.</p>
  
  <hr>
  
  <h2>Update Apr. 4, 2020</h2>
  
  <p>On the official GitHub page of Next.js I was told that the issue might have been related to the fact that two @types/react libraries were co-living in the same Next.js project.</p>
  
  <p>Here's what I tried (to no avail) to test this hypothesis:</p>
  
  <hr>
  
  <p>I rand a quick "yarn why @types/react" and saw the following:</p>
  
  <pre class="lang-sh prettyprint-override"><code>yarn why v1.22.4
  [1/4]   Why do we have the module "@types/react"...?
  [2/4]   Initialising dependency graph...
  [3/4]   Finding dependency...
  [4/4]   Calculating file sizes...
  =&gt; Found "@types/react@16.9.32"
  info Has been hoisted to "@types/react"
  info This module exists because it's specified in "devDependencies".
  info Disk size without dependencies: "164KB"
  info Disk size with unique dependencies: "1.98MB"
  info Disk size with transitive dependencies: "1.98MB"
  info Number of shared dependencies: 2
  =&gt; Found "@types/react-dom#@types/react@16.9.31"
  info This module exists because "@types#react-dom" depends on it.
  info Disk size without dependencies: "164KB"
  info Disk size with unique dependencies: "1.98MB"
  info Disk size with transitive dependencies: "1.98MB"
  info Number of shared dependencies: 2
  ✨  Done in 0.99s.
  </code></pre>
  
  <p>I then tried three things:</p>
  
  <ol>
  <li>Unlink my library > yarn cache clean > reinstall the library (this time from a freshly generated tgz tarball). The issue persisted</li>
  <li>Yarn remove @types/react from the Next.js folder (effectively leaving only @types/react v16.9.31 hoisted from @types/react-dom). The issue persisted</li>
  <li>Completely removed node_modules and yarn.lock and reinstalled all packages (including my library from the tarball). The issue persisted.</li>
  </ol>
  
  <p>I'm still seing the same error message.</p>
  
  <p>By the way, that same component works fine with dynamic loading when imported from Next.js project's own components folder but the goal is to use the external UI kit, obviously.</p>