menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Next.js

A place to chat about Next.js and answer questions. For all other ZEIT products, check this out.

Channels
Team

Using Next.js within a monorepo - shared packages can't use SASS??

September 4, 2018 at 10:38pm
The Next.js community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

Using Next.js within a monorepo - shared packages can't use SASS??

September 4, 2018 at 10:38pm (Edited 3 years ago)

September 4, 2018 at 10:39pm
Hey guys, I'm having a lot of trouble using Next.js within a monorepo setup and was hoping someone could shed some light on it for me
I just spent forever doing Yarn + Monorepo, what do you need?
Yarn Monorepo + Next.js*
The setup is like so...
apps/
app1
app2
app3
packages/
components/
component1
component2
...
The apps are all separate next.js apps with their own config and server etc
The components are all compiled with webpack, and then published to a private npm registry. The apps all have dependencies on the components package, all linked up by lerna.
The issue I'm having is that even though its my own package (so I know that I havent introduced any dependencies on the window object), I still get a 'window not defined' error.
The error seems to come from the webpack style-loader, which we use to bundle sass styles with the components. Removing scss imports and the style-loader fixes the issue, but it means we cant use sass in the components.
hey , if you can help I'd appreciate it infintely, I've spent way too many hours on this now haha!!
so in a sentence I suppose...
I don't know how to make a package bundle using SASS that would work for SSR
Were your projects working already before you tried having them depend on other components?
You mean do the apps work without the dependencies on the local packages?
I unfortunately would not be too much help for you in this context, the one thing that got all of my code working just fine re: Yarn + Next.js was having a loader in my Next.js app
// next.config.js
const withTM = require('/next-plugin-transpile-modules')
module.exports = withTM({
transpileModules: ['']
});
I've never fired up SASS before so I wouldn't be able to attest to what you're seeing
I can use the local packages by requiring them in componentDidMount, but I suppose the point is that if they're my own package I want to be able to make them SSR compatible
Ah, totally get it. Definitely sounds like a config thing since you'll want a way to SSR up your SASS stuff
but it's that webpack style-loader that for some reason has a dependency on window object
ah, so we have sass working for the actual next apps
unfortunately I def won't be too much help here otherwise. Good luck!!
but its the actual packages which arent next apps, they're just separate components compiled with webpack which we include
I'll take a look at them though!
Thanks for your effort though man, appreciate it
That all makes sense to me, I ran into a similar enough issue.
Only naive solution I can think of is altering the webpack in your other non-Next.js packages to look for window at a different time? That was lightweight what I did but wasn't an educated decision at all.
Show more messages