dynamic import Next.js but still see the module in bundle

Question

I'm setting a component as dynamically callable:

index.tsx

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

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

components/PhoneNumberInput.tsx

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

export type PhoneNumberInputProps = {...};

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

So, react-phone-number-input shouldn't be part of the initial bundle, right? but when I analyze it it is still present. Why?

Answer 1

In order to remove the file PhoneNumberInput.tsx from the bundle you need to remove the import in index.ts to ./components/PhoneNumberInput.

For PhoneNumberInputProps you can move that type to its own file, or just change the type to Any to test (if typescript is giving you a hard time).

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