Not work only server side render

[dancon]

Here is minimun reproduction

I only config webpack for server compile:

const path = require('path')

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, 'src/index.jsx'),
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js'
  },
  resolve: {
    extensions: ['*', '.js', '.jsx', '.ts', '.tsx', '.less', '.css']
  },
  target: 'node',
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'isomorphic-style-loader',
          {
            loader: 'css-loader',
            options: {
              onlyLocals: true,
              localsConvention: 'camelCase',
              importLoaders: 1,
              modules: {
                localIdentName: '[path][name]__[local]'
              }
            }
          },
          // 'css-loader',
          {
            loader: 'less-loader',
            options: {
              sourceMap: true,
              relative: true
            }
          }
        ]
      },
      {
        test: /\.jsx?$/,
        use: ["babel-loader"]
      }
    ]
  }
}

and get this:

I found a similar issue, but there is not a clear anwser ~

Did I missing something ?

[makalkin]

trying to do kinda same thing with less, and _getCss just returns object string...

[KimiaBashiran]

I have the same issue, except I use sass. in server.js: const insertCss = (...styles) => styles.forEach((style) => {console.log("in insertCss", style, typeof style); css.add(style._getCss())}); the style is just the name of scss file (in my case string of "card.scss?3vdtWft"), and I get the error of style._getCss is not a function. did you find anything?

[lfscheidegger]

I ran into a similar problem, and I found a workaround for my case - maybe it'll work for other people too.

TL;DR - if you're using webpack4, set the esModule option in css-loader to false.

I'm no expert here by any means, but here's how I debugged this: I had my insertCss function print out the css values it was getting (which ultimately come from webpack when you call something like import css from './styles.css'). In my case I use sass-loader, but I actually think that's irrelevant here.

In an old version of my project (which used webpack3 and isomorphic-style-loader 4), the output of printing those modules was an object with _getContent, _setCss, and _insertCss. This is expected, from looking at https://github.com/kriasoft/isomorphic-style-loader/blob/master/src/index.js#L26.

However, the object printed in the old build also included the non-module -> module mapping for all the css classes. And crucially, those keys (which come from https://github.com/kriasoft/isomorphic-style-loader/blob/master/src/index.js#L25) seem to be missing when this issue reproduces.

I then monkey-patched the installed isomorphic-style-loader (I'm on 5.1.0) to print out css.locals, and as suspected, that's always undefined.

This made me suspect that the issue wasn't directly with isomorphic-style-loader, but with whatever changed in css-loader between webpack3 and webpack4. I more or less guessed at some options until I verified that setting esModule: false in the css-loader options seems to bring back the old behavior.

Worked for me, but YMMV!

[AftabFalak]

Thanks @lfscheidegger i had same issue and after adding esModule:false is working now

here is my webpack.server.js file

module: {
   rules: [
     {
       test: /\.css$/,
       use: [
         {
           loader: 'isomorphic-style-loader'
         },
         {
           loader: 'css-loader',
           options: {
             modules: true,
             esModule: false,
     
           }
         }
       ]
     }
     
   ]
 },

Happy Coding : )

[mihanizm56]

the same problem using sass-loader, css-modules and post-css loader