2

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?

  1. 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.

  2. 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.

  3. 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?

  4. 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.
Ming Soon
  • 998
  • 2
  • 11
  • 32
  • I answered the similar question in here: https://stackoverflow.com/questions/34615898/react-server-side-rendering-of-css-modules/56589817#56589817 Hope it helps. – Eric Tan Jun 14 '19 at 00:04

1 Answers1

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.

Ming Soon
  • 998
  • 2
  • 11
  • 32
  • 1
    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. – pedalpete Dec 05 '17 at 08:37