[英]Can't import named exports from an external NPM library with TypeScript
I'm unable to import named exports from an external component library I've created as it is described in the official documentation .我无法从我创建的外部组件库中导入命名导出,如官方文档中所述。 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?有没有人设法让它工作?
Here comes the context...上下文来了……
Modal component (fragment)模态组件(片段)
const Modal: React.FC<ModalProps> = ({ onCancelCallback, children }) => {...};
export default Modal;
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:如您所见,我将其作为默认值从 Modal.tsx 导出,但稍后将其重新导出为每个文件夹的 index.ts 文件中的命名导出,如下所示:
export { default as Modal } from './Modal';
then然后
export { Modal } from './Modal';
and, finally:最后:
export * from './components';
ModalProps模态道具
export interface ModalProps {
onCancelCallback?: () => void;
}
Here's how I'm importing my external "Modal" component in one of the Next.js components (not pages):这是我在 Next.js 组件之一(不是页面)中导入外部“模态”组件的方式:
nextjscomponent.tsx nextjscomponent.tsx
import dynamic from 'next/dynamic';
const Modal = dynamic(() => import('my-ui-kit').then((mod) => mod.Modal), {
ssr: false,
});
TypeScript error 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)
Any help is highly appreciated.非常感谢任何帮助。 Thank you in advance.先感谢您。
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.在 Next.js 的官方 GitHub 页面上,有人告诉我这个问题可能与两个 @types/react 库共同存在于同一个 Next.js 项目中的事实有关。
Here's what I tried (to no avail) to test this hypothesis:这是我尝试(无济于事)来检验这个假设的方法:
I rand a quick "yarn why @types/react" and saw the following:我快速“解释了为什么@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.
I then tried three things:然后我尝试了三件事:
I'm still seing the same error message.我仍然看到相同的错误消息。
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.顺便说一句,当从 Next.js 项目自己的组件文件夹导入时,相同的组件在动态加载时工作正常,但目标显然是使用外部 UI 工具包。
Here's the solution that came from Next.js's GitHub by @r0skar:这是来自 @r0skar 的 Next.js 的 GitHub 的解决方案:
I've done the following:我做了以下事情:
In my external ui kit在我的外部 ui 套件中
export type { ModalProps } from './Modal.interface';
In Next.js在 Next.js
import { ModalProps } from 'my-ui-kit';
const Modal = dynamic<ModalProps>(() => import('my-ui-kit').then((mod) => mod.Modal), {
ssr: false,
});
This made TypeScript (and myself) happy.这让 TypeScript(和我自己)很高兴。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.