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"
});

[winterJIE]

reply ------------------ winter regard.

…

------------------ 原始邮件 ------------------ 发件人: "Alejo Daraio"<[email protected]>; 发送时间: 2018年8月6日(星期一) 中午11:55 收件人: "webpack-contrib/mini-css-extract-plugin"<[email protected]>; 抄送: "Subscribed"<[email protected]>; 主题: Re: [webpack-contrib/mini-css-extract-plugin] mini-css-extract-pluginwith SSR. (#90) To me works with the @sokra solution. appConfig.module.rules.push({ test: /\.(sa|sc|c)ss$/, use: "css-loader/locals" }); — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[michael-ciniawsky]

#90 (comment)

[ozguruysal]

@michael-ciniawsky since you closed the issue and reading the comment you pointed, does that mean there'll be no SSR support in this plugin?

[Avcajaraville]

@michael-ciniawsky Regarding you affirming there will be no SSR for this plugin (you thumbed up @ozguruysal ), don't you guys think this is a bit harsh for people using ssr ? Do you have an alternative we can use ? I read the comments and suggestions and Im not able to get the requirements fulfilled (to extract the css from our vue components in prod. and generate appropriate CSS).

[alexander-akait]

@Avcajaraville Can you create new issue with test repo and describe what you have right now and what you expected and why?

[Avcajaraville]

@evilebottnawi Alright, I created a test repo for the issue, with comments on the README.md

Here is the repo: https://github.com/Avcajaraville/debugging-mini-css-extract-plugin

Please, read the readme and let me know if something is not clear.

Thanks a lot for taking time to look into this :)

I cant wait to have this working on my project ;)

[Avcajaraville]

@evilebottnawi Did you look at my repo ? Im spending almost every day revisiting the issue and trying to come up with a solution.... no luck 😂

[yisar]

Im spending almost every day revisiting this issue and trying to come up with a solution……no luck，too……

[chentianyuan]

@neverthanmore i rm the css in masfest.json from initial to async with a custom webpack plugin， it effective for me too，i think it just like your method did but we need not to modify the vue source code.

[neverthanmore]

@chentianyuan it seems new pr didn't resolve this problem completely ! so sad

[yisar]

@chentianyuan it seems new pr didn't resolve this problem completely ! so sad

[tiagomatosweb]

Did anyone find a solution?

I'm facing something similar. I am using vue-cli 3 to build a npm package.
If a build without css everything works fine, but if I add css into js the SSR gets trouble with document is not defined.

Any idea?

[GianfrancoCorrea]

i have same problem, using NextJS in Lerna, its say "window is not defined", no one solved this yet?

[sebkolind]

If people still have this issues, consider using this plugin instead: https://github.com/faceyspacey/extract-css-chunks-webpack-plugin ... It just works!

[webjohnjiang]

If people still have this issues, consider using this plugin instead: https://github.com/faceyspacey/extract-css-chunks-webpack-plugin ... It just works!

it works for me. thankyou

[alexander-akait]

Somebody can create minimum reproducible test repo?

[milewski]

I fixed the issue by enforcing a limit of 1 single chunk:

new webpack.optimize.LimitChunkCountPlugin({
   maxChunks: 1
})

[Avcajaraville]

Het @evilebottnawi , I did create a repo back in #90 (comment)

Thanks !

[ScriptedAlchemy]

mini-css does not impact SSR, you shouldn't be using mini-css as part of an SSR build.
https://github.com/faceyspacey/universal-demo (look at the webpack build)
What's needed is chunk flushing: https://github.com/faceyspacey/webpack-flush-chunks

The concept is that you utilize the client build to locate assets that need to be served during the first render.

The mechanism I have designed is implemented in various chunking projects. Though i have not looked outside react at solving the problem.
https://www.smooth-code.com/open-source/loadable-components/docs/server-side-rendering/

some derivative of webpack-flush-chunks could perform the task

[natewallis]

null-loader works for me too.... it prefetches all CSS, but only adds tags for styles used on the page... which is as good as a win for me at this stage.

In server config:

    module: {
        rules: [{
            test: /\.(sa|sc|c)ss$/,
            use: [
                'null-loader',
            ]
        }]
    },

[Murphycx94]

use extract-css-chunks-webpack-plugin instead mini-css-extract-plugin

webpack.base.config.js

const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin')
{
  ...
  {
        test: /\.css$/,
        use: [
          {
            loader: ExtractCssChunksPlugin.loader,
            options: {
              hot: !isProd,
              reloadAll: !isProd
            }
          },
          'postcss-loader',
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: ExtractCssChunksPlugin.loader,
            options: {
              hot: !isProd,
              reloadAll: !isProd
            }
          },
          'css-loader',
          'postcss-loader',
          'less-loader'
        ]
      }
  ...
  plugins: [
   ...
    new ExtractCssChunksPlugin({
      filename: isProd ? 'css/[name].[contenthash:8].css' : '[name].css',
      chunkFilename: isProd ? 'css/[name].[contenthash:8].chunk.css' : '[name].chunk.css'
    })
  ]
}

webpack.server.config.js

{
  ...
  plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1
    })
  ]
}

extract-css-chunks-webpack-plugin

[IlyaSemenov]

So what's the deal with extract-css-chunks-webpack-plugin, how is it different? It tries to 'sell' HMR (even though mini-css-extract-plugin also says HMR is working?), other than that I don't see any difference?

[ScriptedAlchemy]

I merged with mini css and assist in maintaining both. Extract is under my total control and I can make more flexible alterations for users. The projects are generally kept in sync

[slorber]

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

If we require regular CSS (not modules) on the server, now that null-loader is deprecated, what should be used instead?

Setting resolve.alias.package to false will tell webpack@5 to ignore a module.

That does not really seem to be applicable to this usecase.

Creating my own null-loader definitively works, just wondering if it's what I should do 😅

[alexander-akait]

We have emit: true | false option