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

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 @clayh, 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('@weco/next-plugin-transpile-modules')

module.exports = withTM({

transpileModules: ['@org']

});

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

exactly!

https://github.com/zeit/next-plugins/tree/master/packages/next-sass

You take a peek at the examples before?

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

https://github.com/zeit/next.js/tree/master/examples/with-next-sass

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.