Join the conversation

Sign in to join this conversation, and others like it, in the communities you care about.

Next.js

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

Next.js / General

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

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

Next.js/General · September 4, 2018 at 10:38pm

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

Next.js / General · September 4, 2018 at 10:38pm (Edited 5 months 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 @clayh, 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('@weco/next-plugin-transpile-modules')

module.exports = withTM({

transpileModules: ['@org']

});

  • 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

Log in or sign up to chat