使用mini-css-extract-plugin服务端报错document is not defined

[maxlasting]

最近使用 webpack 4 配置 ssr 环境，发现一个奇怪的问题：

当使用 mini-css-extract-plugin 这个插件的时候，如果 在 vue-router 中配置 动态加载的形式

export default [
  {
    path: '/',
    component: () => import(/* webpackChunkName: "index" */ '../views/index.vue')
  },
  {
    path: '/login',
    component: () => import(/* webpackChunkName: "login" */ '../views/login.vue')
  }
]

那么只要在其中人一个.vue文件中中写 css 样式，那么在访问页面的时候就会报错：document is not defined

打开 vue-ssr-server-bundle.json 文件发现 有很多地方使用了 document

于是 就尝试着换回 [email protected]，但是又出现，打包的时候会生成一个 manifest 的空 css 文件，不知如何解决。

我使用的是自己配置的环境，地址在 https://github.com/Maxlasting/vue-ssr-template

请问，能否给一个 基于 webpack 4 的 ssr 示例，或者帮我解决一下上面的问题，非常感谢。

[qa1057]

I also encounter the same problem. How to solve it is good? Online wait

[yekver]

Here is the the successful solution of the same problem: Akryum/vue-cli-plugin-ssr@806418e

[ilyavaiser]

This is very actual problem

[maxlasting]

已经找到解决办法了： use null-loader

webpack-contrib/mini-css-extract-plugin#90

[BODhaha]

请问你解决了吗？

[lsycxyj]

I met another problem with mini-css-extract-plugin. See this comment

Do you guys have any solutions?

[Zousdie]

我参考了 Akryum/vue-cli-plugin-ssr@806418e，但会出现另一个问题，如果异步引入的.vue文件中包含了样式，那么最终生成的html中，内联的style与通过link引入的css样式会重复

[Zousdie]

I found solution from this comment

Use css-loader/locals instead of css-loader, and delete extract-css-loader and MiniCssExtractPlugin

css-loader/locals will not inject the css file at server, so will not appear inline style

[Sherryer]

和 style-loader 冲突 去掉 style-loader 即可

[dongqudamage]

请问有具体代码么

[dongqudamage]

我使用第三方css也会报错

[sdhhqb]

Met samilar situation , use null-loader solve my problem.

{
  test: /\.scss$/,
  use: [
    'null-loader'
  ]
}

At first I use vue-style-loader in webpack.server.config，the error was gone. But cause a new problem, the css rule duplicated.

[minchangyong]

use jsdom can be work。

npm install jsdom --save

// in server.js
const jsdom = require('jsdom')
const { JSDOM } = jsdom

/* 模拟window对象逻辑 */
const resourceLoader = new jsdom.ResourceLoader({
userAgent: "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1",
});// 设置UA
const dom = new JSDOM('', {
url:'www.qtshe.com',
resources: resourceLoader
});

global.window = dom.window
global.document = window.document
global.navigator = window.navigator
window.nodeis = true //给window标识出node环境的标志位
/* 模拟window对象逻辑 */

[YizhuZhan]

I encountered this problem as well. And I found out that it is because I forgot to delete the 'style-loader' reference.

[codeDebugTest]

I create a vue-ssr-demo project with vue-cli, and I also encountered the same problem. My solution is replace the mini-css-extract-plugin with a new loader. You can refer to it.