Akryum / Akryum/vue-cli-plugin-ssr
"document is not defined" when criticalCSS is disabled in production
- Dominant language
- JavaScript
- Stars
- 441
- Forks
- 69
- PR merge metrics
- No merged PRs in 30d
Description
When I set
```js
pluginOptions: {
ssr: {
criticalCSS: false
```
, build and run `yarn ssr:build && yarn ssr:start`, and then directly try to open up an existing subroute like `localhost:8000/something`, this fails with
```
(node:184939) UnhandledPromiseRejectionWarning: ReferenceError: document is not defined
at js/app.e426663d.js:54:37
at new Promise (:null:null)
at Function.requireEnsure [as e] (webpack/bootstrap:49:0)
at component (src/vue-router.coffee:17:17)
at /b/ls/repo/web/node_modules/vue-router/dist/vue-router.common.js:1943:17
... etc ...
at router.beforeEach (src/vue-router.coffee:47:3)
at iterator (/b/ls/repo/web/node_modules/vue-router/dist/vue-router.common.js:2160:7)
... etc ...
at new Promise (:null:null)
at VueRouter.push (/b/ls/repo/web/node_modules/vue-router/dist/vue-router.common.js:2816:12)
at Promise (src/entry-server.coffee:14:9)
```
My guess is, this line https://github.com/Akryum/vue-cli-plugin-ssr/blob/e9d0c4fc448e11805edde294d2cb9654c1daa3ce/lib/webpack.js#L27 is to be blamed. The
https://github.com/Akryum/vue-cli-plugin-ssr/blob/e9d0c4fc448e11805edde294d2cb9654c1daa3ce/lib/webpack.js#L34 below should always be called in production server mode, shouldn't it? Mini CSS Extract Plugin and SSR dont go along well. It is only the https://github.com/Akryum/vue-cli-plugin-ssr/blob/e9d0c4fc448e11805edde294d2cb9654c1daa3ce/lib/webpack.js#L36 that should be triggered depending on whether `criticalCSS` is active.
Is this true? If so, I can create a pull request.
Edit: For the meantime, I fixed it [here](https://github.com/phil294/vue-cli-plugin-ssr)
As an alternative, maybe switch to https://github.com/faceyspacey/extract-css-chunks-webpack-plugin? But this probably needs more adjustments, as simply replacing MiniCSS with this one did not solve the issue for me.
Edit: For debugging purposes, I extracted the errorneous chunk from the vue-ssr-server-bundle.json:
```js
module.exports =
/******/ (function(modules) { // webpackBootstrap
// [...]
/******/ // This file contains only the entry chunk.
/******/ // The chunk loading function for additional chunks
/******/ __webpack_require__.e = function requireEnsure(chunkId) {
/******/ var promises = [];
/******/ // extract-css-chunks-webpack-plugin CSS loading
/******/ var cssChunks = {"chunk-1163a9d5":1,"chunk-7ef57ddd":1};
/******/ if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);
/******/ else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {
/******/ promises.push(installedCssChunks[chunkId] = new Promise(function(resolve, reject) {
/******/ var href = "css/" + ({}[chunkId]||chunkId) + "." + {"chunk-1163a9d5":"5bffa29a","chunk-2d21e30b":"31d6cfe0","chunk-2d231056":"31d6cfe0","chunk-7ef57ddd":"939d4d1e"}[chunkId] + ".chunk.css";
/******/ var fullhref = __webpack_require__.p + href;
/******/ var existingLinkTags = document.getElementsByTagName("link");
```
It fails in the last line.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.