动态导入Next.js，但仍然可以看到包中的模块

Question

我将组件设置为动态可调用：

index.tsx

import dynamic from "next/dynamic";
import { PhoneNumberInputProps } from "./components/PhoneNumberInput";

const PhoneNumberInput = dynamic<PhoneNumberInputProps>(
  () => import("./components/PhoneNumberInput") as any
);

组件/PhoneNumberInput.tsx

...
import PhoneInput from "react-phone-number-input";
...

export type PhoneNumberInputProps = {...};

export const PhoneNumberInput = ({...}: PhoneNumberInputProps) => {
...
}

所以，react-phone-number-input不应该是初始包的一部分，对吗？但当我分析它的时候，它仍然存在。为什么？

Answer 1

为了从包中删除文件PhoneNumberInput.tsx，您需要删除index.ts到./components/PhoneNumberInput中的导入。

对于PhoneNumberInputProps，您可以将该类型移动到它自己的文件中，或者只需将类型更改为Any来测试(如果类型记录给您带来困难的话)。

const PhoneNumberInput = dynamic<Any>(
  () => import("./components/PhoneNumberInput")
);