importing .css from node_modules from within a @shared/ui package

[johmike]

I have a monorepo with several packages. In my @shared/ui package I created a Button that uses a 3rd party library which requires importing css from @shared/ui/node_modules.

I have been following this issue which fixes importing from node_modules WITHIN the next/ folder. However my @shared/ui package is a few levels above /next.

I can manually move the Button component into a next/ui folder and it works as expected. But not when I import from @shared/ui. I tried a few other things like linking and modifying tsconfig with paths and using projectReferences: false to no avail, then I stumbled upon this project.

If I'm reading it properly it seems like I should be able to just add the basic next.config.js example with ["@shared/ui"] and it would work, but unfortunately I run into the same error as before:
Global CSS cannot be imported from within node_modules.

Am I missing something? Should this work or is the third party lib from node_modules causing more issues with transpile-modules?

[martpie]

Hello there 👋 this is a known limitation, and I would even say it's a feature:

• a limitation because there is no way for this plugin to detect who requires what: let's say you need to transpile A, and A and B requires C, which is also ESM. A requires C, and B requires C: what happens? Do I transpile C when only "coming from A"? Etc etc, you see the issue. Even if you declare all the "parents to be transpiled", there is no guarantee you'd still miss something)
• a feature, because a module not shipping ESM might be a bug from their build system
• also a feature, because this plugin is a hack, and hacks should make their behaviors explicit
• the current behavior also prevents a lot of performances issues (transpiled module which do not need to be transpiled at build time)

Hope that helps, I understand the frustration, but it's for the best :)

[johmike]

Thank you, appreciate that. Is there a workaround? I am trying to use the https://rmwc.io/ library in a shared component package. I am looking to ADD next to the existing monorepo. If this was a new project I could just add the component in the /next directory and all would be well. :)

[martpie]

You can have a look at these two examples depending if you prefer to use npm or yarn:

• https://github.com/martpie/monorepo-typescript-next-the-sane-way
• https://github.com/vercel/next.js/tree/canary/examples/with-yarn-workspaces

hope that helps!

[martpie]

Sidenote: if you build your UI library and publish it (in CJS), and consume this UI library via npm or a private package manager, you don't need next-transpile-modules ;)