無法使用 TypeScript 從外部 NPM 庫導入命名導出

Question

我無法從我創建的外部組件庫中導入命名導出，如官方文檔中所述。 這種情況似乎非常小眾，因為我很難在網上找到任何能讓我更接近解決方案的東西。 有沒有人設法讓它工作？

上下文來了……

在我的 NPM 庫中

零件

模態組件（片段）

const Modal: React.FC<ModalProps> = ({ onCancelCallback, children }) => {...};
export default Modal;

如您所見，我將其作為默認值從 Modal.tsx 導出，但稍后將其重新導出為每個文件夾的 index.ts 文件中的命名導出，如下所示：

export { default as Modal } from './Modal';

然后

export { Modal } from './Modal';

最后：

export * from './components';

界面

模態道具

export interface ModalProps {
  onCancelCallback?: () => void;
}

在 Next.js

這是我在 Next.js 組件之一（不是頁面）中導入外部“模態”組件的方式：

nextjscomponent.tsx

import dynamic from 'next/dynamic';
const Modal = dynamic(() => import('my-ui-kit').then((mod) => mod.Modal), {
  ssr: false,
});

TypeScript 錯誤

Argument of type '() => Promise<React.ComponentClass<never, any> | React.FunctionComponent<never> | { default: React.ComponentType<never>; } | React.FC<ModalProps>>' is not assignable to parameter of type 'DynamicOptions<{}> | (() => LoaderComponent<{}>) | LoaderComponent<{}>'.
  Type '() => Promise<React.ComponentClass<never, any> | React.FunctionComponent<never> | { default: React.ComponentType<never>; } | React.FC<ModalProps>>' is not assignable to type '() => LoaderComponent<{}>'.
    Type 'Promise<ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; } | FC<ModalProps>>' is not assignable to type 'LoaderComponent<{}>'.
      Type 'ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; } | FC<ModalProps>' is not assignable to type 'ComponentClass<{}, any> | FunctionComponent<{}> | { default: ComponentType<{}>; }'.
        Type 'ComponentClass<never, any>' is not assignable to type 'ComponentClass<{}, any> | FunctionComponent<{}> | { default: ComponentType<{}>; }'.
          Type 'ComponentClass<never, any>' is not assignable to type 'ComponentClass<{}, any>'.
            Types of property 'getDerivedStateFromProps' are incompatible.
              Type 'GetDerivedStateFromProps<never, any> | undefined' is not assignable to type 'GetDerivedStateFromProps<{}, any> | undefined'.
                Type 'GetDerivedStateFromProps<never, any>' is not assignable to type 'GetDerivedStateFromProps<{}, any>'.
                  Types of parameters 'nextProps' and 'nextProps' are incompatible.
                    Type 'Readonly<{}>' is not assignable to type 'never'.ts(2345)

筆記

• 我正在使用 Rollup 將帶有組件和索引文件的“src”文件夾的內容轉換為“dist”文件夾，該文件夾以 index.cjs.js（對於 CommonJS）、index.esm.js（對於 ES 模塊）和一個一堆自動生成的.d.ts 文件。
• 我正在使用 Yarn 鏈接在本地測試我的外部庫與我的 Next.js 項目的集成。

非常感謝任何幫助。 先感謝您。

---

2020 年 4 月 4 日更新

在 Next.js 的官方 GitHub 頁面上，有人告訴我這個問題可能與兩個 @types/react 庫共同存在於同一個 Next.js 項目中的事實有關。

這是我嘗試（無濟於事）來檢驗這個假設的方法：

---

我快速“解釋了為什么@types/react”並看到以下內容：

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...
=> 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
=> 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.

然后我嘗試了三件事：

1. 取消鏈接我的庫 > yarn cache clean > 重新安裝庫（這次來自新生成的 tgz tarball）。 問題依舊
2. 從 Next.js 文件夾中刪除 @types/react （實際上只留下從 @types/react-dom 提升的 @types/react v16.9.31）。 問題依舊
3. 完全刪除 node_modules 和 yarn.lock 並重新安裝所有包（包括我的 tarball 庫）。 問題依然存在。

我仍然看到相同的錯誤消息。

順便說一句，當從 Next.js 項目自己的組件文件夾導入時，相同的組件在動態加載時工作正常，但目標顯然是使用外部 UI 工具包。

Answer 1

這是來自 @r0skar 的 Next.js 的 GitHub 的解決方案：

---

我做了以下事情：

在我的外部 ui 套件中

export type { ModalProps } from './Modal.interface';

在 Next.js

import { ModalProps } from 'my-ui-kit';
const Modal = dynamic<ModalProps>(() => import('my-ui-kit').then((mod) => mod.Modal), {
  ssr: false,
});

這讓 TypeScript（和我自己）很高興。