Skip to content

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

Open
@phil294

Description

@phil294

When I set

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 (<anonymous>: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 (<anonymous>: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

if (isExtracting && config.criticalCSS) {
is to be blamed. The
rule.uses.delete('extract-css-loader')
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
rule.use('css-context').loader(CssContextLoader).before('css-loader')
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

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:

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions