Server-side rendering of CSS modules

Question

I am going to import styles with CSS Module and make it work with server-side rendering. I tried the following methods but each one has its own caveat. What is the best possible way to require('.style.scss') if any side effects?

Using the css-modules-require-hook:

Advantage: Easy to configure. You just need to call the hook at the beginning of server code. You don't need to modify components.

Caveat: It modifies the require.extensions global object, which is deprecated.
Using the isomorphic-style-loader:

Advantage: No more hooks to require.extensions.

Caveat: Wrapping components with HOCs that uses the React Context, which is an experimental API and likely to break in future releases of React.
Using the webpack-isomorphic-tools:

Advantage: No dependency on require.extensions or Context (AFAIK).

Caveat: Wrapping server inside webpack-isomorphic-tools instance. And can we please get rid of webpack-assets.json?
Bundling server with Webpack:

Advantage: No more hooks or injections.

Caveat: In development, it is very cumbersome to bundle everything whenever the code changes and even makes it harder to debug in a large bundled .js file. Not sure - you may need to pass a bundled .js to test runner.

Disclaimer:

The advantages and caveats below are just my two cents, and actually I love all the libraries, plugins and approaches they took to solve the problem and really appreciate their efforts.
I am not a native English speaker, please correct me if I misrepresent myself.

I answered the similar question in here: stackoverflow.com/questions/34615898/… Hope it helps. — Eric Tan
– Eric Tan, Commented Jun 14, 2019 at 0:04

Ming Soon · Accepted Answer · 2017-02-15 14:59:21Z

0

In the end, I decided to hook the require.extensions in development. Probably it is not the best way, showing warning messages on console, like checksum mismatch, but in development mode, I can ignore it.

answered Feb 15, 2017 at 14:59

Ming Soon

1,0182 gold badges12 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pedalpete Over a year ago

Can you explain what you mean about require.extensions??? I'm going through the same thing and am almost getting css-modules-require-hook working, but not sure if this is truly the right way to go.

Collectives™ on Stack Overflow

Server-side rendering of CSS modules

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related