next.js 无法使用TypeScript从外部NPM库导入命名导出

rur96b6h  于 2023-05-17  发布在  TypeScript
关注(0)|答案(2)|浏览(418)

我无法从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';

接口

ModalProps

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

在Next.js中

下面是我如何将外部“Modal”组件导入到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 link来测试外部库与Next.js项目的本地集成。

任何帮助是高度赞赏。先谢谢你。

4月更新2020年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 > reinstall the library(这次是从新生成的tgz tarball)。这个问题一直存在
  2. Yarn从Next.js文件夹中删除@types/react(实际上只保留从@types/react-dom提升的@types/react v16.9.31)。这个问题一直存在
    1.完全删除了node_modules和yarn.lock,并重新安装了所有的包(包括我的库)。这个问题仍然存在。
    我仍然看到相同的错误消息。
    顺便说一句,当从Next.js项目自己的组件文件夹导入时,相同的组件可以很好地动态加载,但显然目标是使用外部UI工具包。
wnavrhmk

wnavrhmk1#

以下是来自Next.js的GitHub的解决方案,作者是@r0skar:
我做了以下工作:

在我的外部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(和我自己)很高兴。

0mkxixxg

0mkxixxg2#

使用async函数对我来说也很有效。我想你的案子应该是这样的

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

相关问题