CSS-Module classes are undefined while React server side rendering

Question

I am not using Webpack config for React SSR. Instead this is my config:

require("@babel/register")({
  presets: ["@babel/preset-env", "@babel/preset-flow", "@babel/preset-react"],
  plugins: [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties",
    "babel-plugin-dynamic-import-node",
    "@babel/plugin-transform-modules-commonjs",    
    [
      "module-resolver",
      {
        root: ["./src"]
      }
    ]
  ]
});

require("ignore-styles");

module.exports = require("./server.js");

The problem is css classes are undefined in the rendered html. How can I fix this?

Hadi Ranjbar · Accepted Answer · 2020-02-05 07:06:50Z

5

I finally added this plugin to babel:

[
  "css-modules-transform",
  {
    camelCase: true,
    extensions: [".css", ".scss"],
    preprocessCss: "./ssr/utils/SsrCssModuleHandler.js",
    generateScopedName: "[hash:base64:5]"
  }
]

in which SsrCssModuleHandler is a module:

    var sass = require('node-sass');

    var path = require('path');

    module.exports = function processSass(data, filename) {
        var result;
        result = sass.renderSync({
            data: data,
            file: filename
        }).css;
        return result.toString('utf8');
    };

and the problem is solved!

answered Feb 5, 2020 at 7:06

Hadi Ranjbar

1,8224 gold badges25 silver badges44 bronze badges

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

Comments

David Bradshaw · Accepted Answer · 2020-02-01 10:56:19Z

0

The above config is for Babel which is only going to process JS. If you want to use CSS-modules without webpack, then you still need to process your CSS into a format that works in the bowsers.

The best css processor is called PostCSS and their is a plug-in for CSS-Module support

https://github.com/css-modules/postcss-modules

answered Feb 1, 2020 at 10:56

David Bradshaw

13.2k3 gold badges45 silver badges76 bronze badges

Collectives™ on Stack Overflow

CSS-Module classes are undefined while React server side rendering

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related