menu

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 2 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
  • reply
  • like
I just spent forever doing Yarn + Monorepo, what do you need?
  • reply
  • like
Yarn Monorepo + Next.js*
  • reply
  • like
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.
  • reply
  • like
hey , if you can help I'd appreciate it infintely, I've spent way too many hours on this now haha!!
  • reply
  • like
so in a sentence I suppose...
  • reply
  • like
I don't know how to make a package bundle using SASS that would work for SSR
  • reply
  • like
Were your projects working already before you tried having them depend on other components?
  • reply
  • like
You mean do the apps work without the dependencies on the local packages?
  • reply
  • like
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: ['']
});
  • reply
  • like
I've never fired up SASS before so I wouldn't be able to attest to what you're seeing
  • reply
  • like
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
  • reply
  • like
Ah, totally get it. Definitely sounds like a config thing since you'll want a way to SSR up your SASS stuff
  • reply
  • like
exactly!
  • reply
  • like
You take a peek at the examples before?
  • reply
  • like
but it's that webpack style-loader that for some reason has a dependency on window object
  • reply
  • like
ah, so we have sass working for the actual next apps
  • reply
  • like
unfortunately I def won't be too much help here otherwise. Good luck!!
  • reply
  • like
but its the actual packages which arent next apps, they're just separate components compiled with webpack which we include
  • reply
  • like
I'll take a look at them though!
  • reply
  • like
Thanks for your effort though man, appreciate it
  • reply
  • like
That all makes sense to me, I ran into a similar enough issue.
  • reply
  • like
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.
  • reply
  • like
Show more messages