Packages bundled using webpack style-loader are not SSR compatible so cant be imported into Next.js

Question

So I have a monorepo setup like so...

apps/

  app1

  app2

  app3

packages/

  components/

    component1

    component2

Where the apps are all functioning next.js apps, and the components package is published on a npm private registry and is bundled by webpack.

The issue I have is that I can only import the components package to the next apps in componentDidMount, ie client side. Trying to import the components server side leads to a 'window not defined' error which stems from the style-loader webpack loader.

So I can import the package successfully when I remove any sass imports and the style-loader, but then obviously I cant include any sass in the components and that's an issue.

Does anyone know how I can bundle a package with sass and then successfully import it server-side into a next app?

Matt Wills Matt Wills · Accepted Answer · 2018-09-05T09:48:16

I did solve this in the end...

I had to build my components package using an extract css chunks plugin to keep the css separate from the js, thereby removing the need for the style loader, and leaving me with a main.css (in addition to the index.js) in the node modules.

I could then import the components serverside without a problem, and just had to include the main.css file from package_name/dist/ as part of my app‘s static/style.css to give them the their styles.

Packages bundled using webpack style-loader are not SSR compatible so cant be imported into Next.js

1 Answers