How can I use style-loader in react SSR (Server Side Rendering)?

Question

As you know, we can easily use style-loader to add our styles to our react project, but the window is not available in Server Side Rendering, so how I can use style-loader (or something instead of that in SSR project)?

When I use style-loader, it returns this error as expected:

 .../public/server.js:866
        return window && document && document.all && !window.atob;
        ^

    ReferenceError: window is not defined

Did you resolve this issue? – Shawn Baek Oct 03 '18 at 11:45 — Shawn Baek, Oct 03 '18 at 11:45

score 9 · Accepted Answer · answered Jul 28 '18 at 10:15

9

I just found an answer to my question; We can use isomorphic-style-loader for loading styles in SSR

answered Jul 28 '18 at 10:15

Pouya Jabbarisani

1,084
3
16
29

Hey man, I did exactly what the link showed but I get the message `No PostCSS Config found in ...\css`. Did you get this error too? – kabison33 Aug 16 '20 at 17:22
@kabison33 to solve this error you need to add to your project `postcss.config.js` file – Ruslan Valeev Nov 10 '20 at 10:30
2

this doesn't support react 18 anyone have any alternatives? – Patrick Michaelsen Aug 13 '22 at 01:06

itay · Answer 2 · 2023-04-29T13:28:00.950

0

An update to something more recent - I hope it will help someone

For react 18 the lab 'isomorphic-style-loader' wont work (does not have support).

There is a new lab that has support for react 18 which does the same thing: 'isomorphic-style-loader-react18'

P.S - you will need to install 'postcss-loader' as well.

edited Apr 29 '23 at 13:28

answered Apr 29 '23 at 13:26

itay

1
2

How can I use style-loader in react SSR (Server Side Rendering)?

2 Answers2

Linked