[Question]: Installation / peer deps

[afraser]

I'm reading your installation guide and am confused as to why there are so many things to install that aren't listed among the other peer dependencies on package json.

Specifically these:

@headlessui/react
@headlessui/tailwindcss
@tailwindcss/forms
@remixicon/react

The documentation doesn't currently explain when/why these are required and I don't understand why they aren't simply bundled.

Somewhat related: Bundlephobia is showing me a confusing breakdown of the bundle here:

1. the bundle is nearly a megabyte in size
2. It's showing date-fns as being ~300kb when it's really about 75kb
3. It's showing recharts as taking up ~300kb... this is actually plausible assuming it was tree-shaken on your end.

[jzfrank]

I would like to be assigned for this!

[jzfrank]

I've double checked the installation guide, a couple of observations here:

1. npm install tailwindcss@latest, npm install @headlessui/react, npm install @headlessui/tailwindcss are probably not needed, as they are added after running npm install @tremor/react (because they are added as dependencies in source code package.json).
2. Runningnpm install -D @tailwindcss/forms makes sense. However, as it is needed anyway, a better approach is probably just to bundle it, as @afraser pointed out.
3. Not sure how is npm install @remixicon/react contributing here. As I did a quick search in source code and found no usage of @remixicon/react.
4. As a side remark, in NextJS guide, we should also instruct users to change /styles/global.css to

@tailwind base;
@tailwind components;
@tailwind utilities;

in case they didn't follow tailwindcss installation guide.

I'm still trying to figure out how to minimize the bundle size. Now the bottleneck is to find a reliable and reproducible bundle checker. Take bundlephobia as an example, while we get the same result as you, we get a different breakdown when only uploading package.json:

While it gives similar total size, the date-fns now seems normal (~75KB). And it's showing the trouble maker is the recharts, which is ~600KB (see this).

---

For discussion reference, the current installation guide for NextJS as June 4, 2024 is:

[alexbalonperin]

@jzfrank Concerning the bundle size, it looks like it might be due to how the recharts library was designed (according to this comment: recharts/recharts#3697 (comment)).

Here is the gist of it from Coltin Kifer (one of the library maintainers):

Generate categorical chart alone is 73kb https://github.com/recharts/recharts/blob/master/src/chart/generateCategoricalChart.tsx which makes me think that a lot of this bloat is just the fact that there is so much used code in general and lots of cross-component imports. A bundle gets a little, but can't get much due to the interconnectedness of the components (generateCategoricalChart is used for everything and imports most components).

It looks like there is a babel plugin to allow importing only specific modules but unfortunately it is unmaintained (https://github.com/recharts/babel-plugin-recharts). It's surprising that it's not maintained considering the number of people complaining about recharts bundle size. In any case, as far as I understand, unless you are willing to contribute to that babel plugin and that the maintainer is going to merge your contributions, there isn't much to be done about recharts at the moment. 😞