无法使用 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';

界面

ModalProps

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 项目中有关。

这是我尝试（无济于事）来验证这个假设的方法：

---

我跑了一个快速的“yarn why @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. Unlink my library > yarn cache clean > 重新安装库（这次是从新生成的 tgz tarball）。问题依然存在
2. Yarn 从 Next.js 文件夹中删除@types/react（实际上只保留从@types/react-dom 提升的@types/react v16.9.31）。问题依然存在
3. 完全删除 node_modules 和 yarn.lock 并重新安装所有包（包括我的压缩包库）。问题仍然存在。

我仍然看到同样的错误信息。

顺便说一句，当从 Next.js 项目自己的组件文件夹导入时，同一个组件在动态加载时工作正常，但目标显然是使用外部 UI 工具包。

Answer 1

这是 @r0skar 来自 Next.js 的 GitHub 的解决方案：

---

我做了以下事情：

在我的外部用户界面工具包中

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（和我自己）很开心。

Answer 2

使用

async

功能也对我有用。所以，我认为你的情况看起来像这样

const Modal = dynamic(
  async () => (await import('my-ui-kit')).Modal,
  { ssr: false }
);