mini-css-extract-plugin with SSR.

[princesoni1989]

How can we use mini-css-extract-plugin with SSR and server bundle.I tried using it is gives error
document is not defined

[alexander-akait]

@princesoni1989 looks like a bug/feature. Can you create minimum reproducible example?

[bwhitty]

I'd recommend reading #48 (comment)

[princesoni1989]

@bwhitty I tried same, Error was removed but with was producing warning related to content mismatch between server and client.

[sokra]

Don't use this plugin in a server bundle. Use null-loader or css-loader/locals (for CSS modules) instead.

[johnelliott]

@sokra just to clarify your suggestion, how would a user import the generated asset name into a bundle to generate a <link ... > tag in a template language or server-side react?

https://github.com/webpack-contrib/mini-css-extract-plugin#using-preloaded-or-inlined-css

The 'runtime code' aspect of this module really confuses me. I don't understand why there needs to be runtime code for CSS extraction, so I must be trying to use this module in the wrong situation. It seems highly geared towards JS-heavy single-page apps that load more JS and CSS asynchronously.

My goal is to server-render a react/redux app with link tags to the built CSS. My server code needs to know the paths of the built CSS files that include content hashes for caching.

Am I on the right track by using this module? The docs for the extract-text-webpack-plugin try to discourage users from using it with webpack 4, but this module doesn't seem to suit some of the past use cases.

[DimychOcean]

My experiments with SSR have shown that you can skip the "requireEnsure" hook on the server side. And I came to this solution: override method "getCssChunkObject" in MiniCssExtractPlugin class.

class ServerMiniCssExtractPlugin extends MiniCssExtractPlugin {
  getCssChunkObject(mainChunk) {
    return {};
  }
}

And then in server webpack config used class ServerMiniCssExtractPlugin.
My rule for CSS in config for server:

      {
        test: /\.css$/,
        use: [
          {
            loader: ServerMiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]--[hash:base64:5]',
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                require('autoprefixer')({
                  flexbox: 'no-2009',
                  grid: true
                })
              ]
            }
          }
        ]
      }

It's work for me.

[johnelliott]

I just skipped this module entirely and I’m now using the css-loader and extract-loader.

[yisar]

I also encountered this problem and thought it was a bug. Would you solve it? Or can I only solve it myself?

[alejodaraio]

To me works with the @sokra solution.

appConfig.module.rules.push({
        test: /\.(sa|sc|c)ss$/,
        use: "css-loader/locals"
});