SSR document is not defined

[falstack]

Version

3.8.2

Reproduction link

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

Environment info

  System:
    OS: macOS Mojave 10.14.1
    CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Browsers:
    Chrome: 74.0.3729.157
    Firefox: Not Found
    Safari: 12.0.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  3.7.0
    @vue/babel-preset-jsx:  1.0.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.0.0
    @vue/cli-overlay:  3.7.0
    @vue/cli-plugin-babel: ^3.7.0 => 3.7.0
    @vue/cli-plugin-eslint: ^3.7.0 => 3.7.0
    @vue/cli-service: ^3.7.0 => 3.7.0
    @vue/cli-shared-utils:  3.7.0
    @vue/component-compiler-utils:  2.6.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.2
    vue: ^2.6.10 => 2.6.10
    vue-eslint-parser:  5.0.0
    vue-hot-reload-api:  2.3.3
    vue-loader:  15.7.0
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.21 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

我用 vue-cli 写的组件打包之后，在 SSR 时会报错document is not defined，因为 css 被 inject 到 js 里了

究其原因是 mini-css-extract-plugin 导致的，能否将 mini-css-extract-plugin 替换成 extract-css-chunks-webpack-plugin 呢？

What is expected?

带 css 的组件在服务端可以正常引入

What is actually happening?

document is not defined

---

https://github.com/faceyspacey/extract-css-chunks-webpack-plugin

[haoqunjiang]

1. 请提供复现
2. 是不是设置了 css: { extract: false }？在 SSR 环境里不应该这么用的。以及，需要支持 SSR 的话可以考虑用这个插件：https://github.com/Akryum/vue-cli-plugin-ssr

[falstack]

的确是使用了css: { extract: false }，我希望它不会在 server 端报错

[haoqunjiang]

如果禁用了 extract，那根本不会引入 mini-css-extract-plugin

vue-cli/packages/@vue/cli-service/lib/config/css.js

Lines 98 to 105 in 47d56e9

	if (shouldExtract) {
	rule
	.use('extract-css-loader')
	.loader(require('mini-css-extract-plugin').loader)
	.options({
	hmr: !isProd,
	publicPath: cssPublicPath
	})

[falstack]

嗯，这里的逻辑是默认会把 css 抽出来的，也就是默认extract: true

但我不想把 css 从 js 中抽离出来，因为这样别人在引用的时候就得额外引入 css，这很奇怪

[falstack]

从这个讨论中看到，这是mini-css-extract-plugin的一个 bug，所以换成extract-css-chunks-webpack-plugin应该能解决问题

[haoqunjiang]

请提供复现

现在的情况是，根据你的描述，你的应用应该根本没有用到 mini-css-extract-plugin，但是你认为你碰到了它的 bug？

[falstack]

抱歉我还没理清楚这个问题