Turborepo compiling issues
So we are working on a project, which i just migrated to a mono repo.
Before we had 4 repos (API, admin, customer, website) now they are combined in a single (turbo)repo. So under apps/* are these old repos.
Since we are using some UI stuff in all of our websites (not the api of course, but there we whould also use stuff like shared helper functions), i want to refactore the code.For example i made a file on the root level with some standard helper functions, no problem yet (i hope this still works on deployment, because of building phase cloning the entire repo not just the
apps/api
-part e.g.).
Now the problem : i want to extract components like buttons, cards and so on, into the "ui" package, so i also need next, react-icons and so on as a dependency there. these components are then getting imported from the different frontends.
If i make a change to and save so the websites updates, it compiles for 106s (see screenshot!)
i do think that i am doing something very wrong here!
Need help big time![](https://utfs.io/f/a478ad34-9e5e-4b73-9190-3b2469a98735-2552df.20.12.png)
9 Replies
i can provide more details if needed!
![](https://utfs.io/f/ddca6cda-497a-48e9-845b-6f1f15768d70-2552dd.27.20.png)
i think 8MB of parsed _app.js is kind big?
![](https://utfs.io/f/a2ec85ee-6ee4-48b0-aab6-15372e847b10-2552dd.39.02.png)
also the fast refresh is taking ages
is it because of the import of heroicons?
i am importing like this:
import { ChartBarIcon } from "@heroicons/react/24/outline"
so i am wondering, why i am getting the complete files importedi changed all my imports from 24/solid to these import, but i still get the complete icons bundled
![](https://utfs.io/f/c11aa1e6-8062-4ab5-8f0a-db3290fe47c0-cj97uk.44.29.png)
this is a fast refresh after some small changes,.
i need help with this bois
![](https://utfs.io/f/b71d7e5c-5735-4f44-90d2-a762cb82b0dc-cj97vf.48.29.png)
FIXED: https://github.com/vercel/next.js/issues/29559#issuecomment-1398874905
i added that line, so that my tailwindcss bundle with all used css classes whould also take all files in the ui package into consideration.
Now the problem is: some tailwindcss classes are only getting used in some ui package component. If i try to import it into an app, the
className
is propperly set, but the correlating css attributes arent getting send to the client (because of said tailwind config setting.).
I guess i have to fix that in the ui packageGitHub
NextJs compiling extremely slow · Issue #29559 · vercel/next.js
What version of Next.js are you using? 11.1.2 What version of Node.js are you using? 14.18.0 What browser are you using? Chrome What operating system are you using? Windows 10 How are you deploying...
used this example from turbo to configure a shared tailwind config:
https://github.com/vercel/turbo/tree/main/examples/with-tailwind
GitHub
turbo/examples/with-tailwind at main · vercel/turbo
Incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust – including Turbopack and Turborepo. - turbo/examples/with-tailwind at main · vercel/turbo
You could also try using
modularizeImports
for the heroicons. Would cut down on the bundle size as well.
https://nextjs.org/docs/architecture/nextjs-compiler#modularize-imports
Edit: Oh, that's one of the things in the issue you linked.Architecture: Next.js Compiler
Next.js Compiler, written in Rust, which transforms and minifies your Next.js application.