Akryum / Akryum/vue-cli-plugin-ssr

"document is not defined" when criticalCSS is disabled in production

Offen
#186 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
JavaScript
Sterne
441
Forks
69
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

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.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.