It was my understanding that if I was to dynamically import the only components that use a third-party library, then that library wouldn't be included in the 'First Load Bundle' shipped out to the client.

I am using Recharts in the following two components (this is the only place it's imported in the app), and I am then importing those components into the parent component like this:

const UvGraphTile = dynamic(() => import("@/components/tiles/UvGraphTile"), {
  ssr: false,
});
const StravaGraphTile = dynamic(() => import("@/components/tiles/StravaGraphTile"),
  {
    ssr: false,
  }
);

However Recharts still appears in the 'First Load Bundle', as seen in the screen shot provided. I don't know if I am making a mistake, or if my interpretation of the dynamic import for NextJS is incorrect.

Any help would be greatly appreciated! :)