fix: mini-css-extract-plugin error on server

Author: Guillaume Chau

lib/ServerMiniCssExtractPlugin.js

@@ -0,0 +1,9 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+class ServerMiniCssExtractPlugin extends MiniCssExtractPlugin {
+  getCssChunkObject (mainChunk) {
+    return {}
+  }
+}
+
+module.exports = ServerMiniCssExtractPlugin

lib/webpack.js

@@ -7,10 +7,12 @@ const WebpackBar = require('webpackbar')
 
 const config = require('./config')
 const HtmlFilterPlugin = require('./HtmlFilterPlugin')
+const ServerMiniCssExtractPlugin = require('./ServerMiniCssExtractPlugin')
 
 exports.getWebpackConfig = ({ target }) => {
   const service = config.service
   const isProd = service.mode === 'production'
+  const isClient = target === 'client'
 
   let webpackConfig = service.resolveChainableWebpackConfig()
 
@@ -21,6 +23,25 @@ exports.getWebpackConfig = ({ target }) => {
   webpackConfig.plugins.delete('progress')
   webpackConfig.plugins.delete('no-emit-on-errors')
 
+  if (!isClient) {
+    webpackConfig.plugins.delete('friendly-errors')
+
+    // Fix mini-css-extract-plugin error on server
+    const langs = ['css', 'postcss', 'scss', 'sass', 'less', 'stylus']
+    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
+    for (const lang of langs) {
+      for (const type of types) {
+        const rule = webpackConfig.module.rule(lang).oneOf(type)
+        if (rule.uses.has('extract-css-loader')) {
+          rule.use('extract-css-loader').loader(ServerMiniCssExtractPlugin.loader)
+        }
+      }
+    }
+    if (webpackConfig.plugins.has('extract-css')) {
+      webpackConfig.plugin('extract-css').use(ServerMiniCssExtractPlugin)
+    }
+  }
+
   // HTML
   webpackConfig.plugin('html-filter').use(HtmlFilterPlugin)
   if (isProd) {
@@ -49,7 +70,6 @@ exports.getWebpackConfig = ({ target }) => {
     },
   })
 
-  const isClient = target === 'client'
   if (isClient) {
     webpackConfig = mergeWebpack(webpackConfig, {
       plugins: [
@@ -80,6 +100,7 @@ exports.getWebpackConfig = ({ target }) => {
       devtool: 'source-map',
       optimization: {
         splitChunks: false,
+        minimize: false,
       },
     })
 

package.json

@@ -35,6 +35,7 @@
     "fs-extra": "^7.0.0",
     "lru-cache": "^4.1.3",
     "memory-fs": "^0.4.1",
+    "mini-css-extract-plugin": "^0.4.2",
     "portfinder": "^1.0.17",
     "rimraf": "^2.6.2",
     "serve-favicon": "^2.5.0",