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
9 Replies
Balduin
Balduin2y ago
i can provide more details if needed!
Balduin
Balduin2y ago
Balduin
Balduin2y ago
i think 8MB of parsed _app.js is kind big?
Balduin
Balduin2y ago
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 imported
Balduin
Balduin2y ago
i changed all my imports from 24/solid to these import, but i still get the complete icons bundled
Balduin
Balduin2y ago
this is a fast refresh after some small changes,. i need help with this bois
Balduin
Balduin2y ago
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 package
GitHub
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...
Balduin
Balduin2y ago
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
thescotsmav
thescotsmav2y ago
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.
Want results from more Discord servers?
Add your server