我无法从我创建的外部组件库导入命名导出,如 official documentation 中所述。 。这种情况似乎非常小众,因为我很难在网上找到任何能让我更接近解决方案的东西。有人设法让它工作吗?
上下文来了...
在我的 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 组件(不是页面)之一中导入外部“Modal”组件:
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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="176572767463572621392e392425" rel="noreferrer noopener nofollow">[email protected]</a>"
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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfcddadedccbff8e899186918c8e" rel="noreferrer noopener nofollow">[email protected]</a>"
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.
然后我尝试了三件事:
- 取消链接我的库 > yarn 缓存清理 > 重新安装库(这次是从新生成的 tgz tarball)。问题依然存在
- Yarn 从 Next.js 文件夹中删除 @types/react(实际上只留下从 @types/react-dom 提升的 @types/react v16.9.31)。问题依然存在
- 完全删除了node_modules和yarn.lock并重新安装了所有软件包(包括tarball中的我的库)。问题依然存在。
我仍然看到相同的错误消息。
顺便说一句,当从 Next.js 项目自己的组件文件夹导入时,该组件可以很好地进行动态加载,但显然,目标是使用外部 UI 工具包。
最佳答案
以下是 @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(和我自己)很高兴。
关于typescript - 无法使用 TypeScript 从外部 NPM 库导入命名导出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61011100/