[edge] vue-style-loader didn't discriminate between server and client #3804

stevefan1999-personal · 2018-08-27T08:59:43Z

Version

2.0.0-25586998.83d9dc4

Reproduction link

https://github.com/stevefan1999/nuxt-cache-bug-repo/tree/master/

Reproduction step

Flatten the project and start Nuxt
Browse the index page after listen success

What is expected ?

"It just works"

What is actually happening?

It will show up this generic error regardlessly on any files that use styling:

√ success Nuxt files generated
i info Warming up worker pools
√ success Worker pools ready
× error ReferenceError: document is not defined
  at addStyle (node_modules/vue-style-loader/lib/addStylesClient.js:120:0)
  at addStylesToDom (node_modules/vue-style-loader/lib/addStylesClient.js:104:0)
  at addStylesClient (node_modules/vue-style-loader/lib/addStylesClient.js:58:0)
  at Object../node_modules/vuetify/dist/vuetify.css (node_modules/vuetify/dist/vuetify.css?4433:9:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../dist/.nuxt/App.js (dist/.nuxt/App.js:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../dist/.nuxt/index.js (dist/.nuxt/index.js:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../dist/.nuxt/server.js (dist/.nuxt/server.js:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Object.0 (server-bundle.js:4547:18)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at server-bundle.js:118:18
  at Object.<anonymous> (server-bundle.js:121:10)

Additional comments?

Somewhat related: vuejs/vue-style-loader#16
OS: Microsoft Windows [Version 10.0.17134.165]
Node: v10.9.0
Yarn: 1.9.4

_{This bug report is available on Nuxt community (#c7631)}

The text was updated successfully, but these errors were encountered:

stevefan1999-personal · 2018-08-27T10:24:23Z

Strange, if I turned off caching it worked. However, I still think it is an issue since caching and CSS generation should be able to co-exist.

clarkdo · 2018-08-27T10:35:50Z

@stevefan1999 Hi, I want to confirm what caching you mean ? Is it build.cache ?

Or could you provide a reproducible repo ?

stevefan1999-personal · 2018-08-27T11:07:57Z

@clarkdo ahhh nevermind I made a reproduction demo on github anyway, see the updated info in the OP.

clarkdo · 2018-08-27T12:49:23Z

I think this issue is related to parallel: true which will enable thread-loader, the original issue is here and has been fixed by this pr which has been release in thread-loader 1.2.0.

I tried your repo, but cannot reproduce the issue, so could you confirm the thread-loader version in node_modules/thread-loader/package.json ?

stevefan1999-personal · 2018-08-27T13:30:02Z

🤔Well, the version of thread-loader is indeed 1.2.0

{
  "_from": "thread-loader@^1.2.0",
  "_id": "thread-loader@1.2.0",
  "_inBundle": false,
  "_integrity": "sha512-acJ0rvUk53+ly9cqYWNOpPqOgCkNpmHLPDGduNm4hDQWF7EDKEJXAopG9iEWsPPcml09wePkq3NF+ZUqnO6tbg==",
  "_location": "/thread-loader",
  "_phantomChildren": {},
  "_requested": {
    "type": "range",
    "registry": true,
    "raw": "thread-loader@^1.2.0",
    "name": "thread-loader",
    "escapedName": "thread-loader",
    "rawSpec": "^1.2.0",
    "saveSpec": null,
    "fetchSpec": "^1.2.0"
  },
  "_requiredBy": [
    "/nuxt-edge"
  ],
  "_resolved": "https://registry.npmjs.org/thread-loader/-/thread-loader-1.2.0.tgz",
  "_shasum": "35dedb23cf294afbbce6c45c1339b950ed17e7a4",
  "_spec": "thread-loader@^1.2.0",
  ...

And turning off parallel mode while leaving cache on does no good, but using parallel mode alone is okay.
It seems like I've forgot some important details. I've had them amended.

Edit: 😵Using WSL (and hence Linux) got both cache and parallel working together without problem somehow, perhaps it is a Windows-specific bug?
Edit 2: Nope, actually, the error is still there on the server console, but it didn't affect client side (so no more disturbing error page hinting that document is not defined)

clarkdo · 2018-08-27T14:26:21Z

Actually I was using windows for reproducing your issue😢, but I cannot.

Could you remove all node_modules and yarn.lock then reinstall them ?

stevefan1999-personal · 2018-08-27T14:39:04Z

Purging my modules and reinstalling it did work for now. This is such a weird and subtle bug that there is no reliable way to reanimate it.

Last time I received this error, the logging was:

[Vue warn]: Error in beforeCreate hook: "ReferenceError: document is not defined"

found in

---> <NuxtError> at packages/client/layouts/error.vue
       <Nuxt>
         <VContent>
           <VApp>
             <Default> at packages/client/layouts/default.vue
               <Root>
✖ error ReferenceError: document is not defined
  at addStyle (node_modules/vue-style-loader/lib/addStylesClient.js:120:0)
  at addStylesToDom (node_modules/vue-style-loader/lib/addStylesClient.js:104:0)
  at addStylesClient (node_modules/vue-style-loader/lib/addStylesClient.js:58:0)
  at Object../node_modules/cache-loader/dist/cjs.js?!./node_modules/thread-loader/dist/cjs.js?!./node_modules/vue-style-loader/index.js?!./node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./packages/client/layouts/error.vue?vue&type=style&index=0&id=020d6102&scoped=true&lang=css& (packages/client/layouts/error.vue?21dc:9:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../packages/client/layouts/error.vue?vue&type=style&index=0&id=020d6102&scoped=true&lang=css&
(packages/client/layouts/error.vue?64ed:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at VueComponent.injectStyles (packages/client/layouts/error.vue:6:0)
  at VueComponent.hook (node_modules/vue-loader/lib/runtime/componentNormalizer.js:53:0)
  at callHook (/mnt/e/typescript-starter/node_modules/vue/dist/vue.runtime.common.js:2919:21)
  at VueComponent.Vue._init (/mnt/e/typescript-starter/node_modules/vue/dist/vue.runtime.common.js:4624:5)
  at new VueComponent (/mnt/e/typescript-starter/node_modules/vue/dist/vue.runtime.common.js:4796:12)
  at createComponentInstanceForVnode (/mnt/e/typescript-starter/node_modules/vue-server-renderer/build.js:7353:10)
  at renderComponentInner (/mnt/e/typescript-starter/node_modules/vue-server-renderer/build.js:7527:40)
  at renderComponent (/mnt/e/typescript-starter/node_modules/vue-server-renderer/build.js:7502:5)
  at renderNode (/mnt/e/typescript-starter/node_modules/vue-server-renderer/build.js:7418:5)

I'd close this for being uncertain about reproducibility. However, I doubt it will ever happen again.🤔

stevefan1999-personal · 2018-09-08T10:17:27Z

I think I found a workaround: Just disable stylesheet caches on server-side:

Add this to your nuxt.config.js:

build: {
  ...
  cache: true,
  extend(config, { isServer, isDev, isClient }) {
    ...
    if (isServer) {
      for (const rules of config.module.rules.filter(({ test }) =>
        /\.((c|le|sa|sc)ss|styl.*)/.test(test.toString())
      )) {
        for (const rule of rules.oneOf || []) {
          rule.use = rule.use.filter(
            ({ loader }) => loader !== 'cache-loader'
          )
        }
      }
    }
    ...
  }
  ...
}

So this also implies that this crux of the problem actually lies on cache-loader...For some reason cache-loader incorrectly determined the current environment as browser and not node so that vue-style-loader is confused and used client implementation instead...

clarkdo · 2018-09-08T10:33:45Z

Related to webpack-contrib/cache-loader#40

BTW, cache-loader can be disabled by build.cache: false

stevefan1999-personal · 2018-09-08T11:01:16Z

@clarkdo Of course I want caches😥I'm working on a live reload environment (fortunately full reboot is reflected on server-side code only) and I cannot take that ~15s warmup time of Nuxt anymore...

galvez · 2018-09-08T13:49:07Z

@stevefan1999 nicely done! I had a suspicion that it was related to cache but wasn't able to confirm.

vuejs/vue-style-loader#30

benfavre · 2018-09-21T15:30:36Z

@stevefan1999 needed this fix when using latest nuxt-edge on linux

lock · 2018-10-31T19:38:15Z

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

ghost added the cmty:bug-report label Aug 27, 2018

stevefan1999-personal closed this as completed Aug 27, 2018

lock bot locked as resolved and limited conversation to collaborators Oct 31, 2018

danielroe added 2.x pending triage labels Jan 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[edge] vue-style-loader didn't discriminate between server and client #3804

[edge] vue-style-loader didn't discriminate between server and client #3804

stevefan1999-personal commented Aug 27, 2018 •

edited

stevefan1999-personal commented Aug 27, 2018

clarkdo commented Aug 27, 2018 •

edited

stevefan1999-personal commented Aug 27, 2018 •

edited

clarkdo commented Aug 27, 2018 •

edited

stevefan1999-personal commented Aug 27, 2018 •

edited

clarkdo commented Aug 27, 2018

stevefan1999-personal commented Aug 27, 2018

stevefan1999-personal commented Sep 8, 2018

clarkdo commented Sep 8, 2018 •

edited

stevefan1999-personal commented Sep 8, 2018

galvez commented Sep 8, 2018

benfavre commented Sep 21, 2018

lock bot commented Oct 31, 2018

[edge] vue-style-loader didn't discriminate between server and client #3804

[edge] vue-style-loader didn't discriminate between server and client #3804

Comments

stevefan1999-personal commented Aug 27, 2018 • edited

Version

Reproduction link

Reproduction step

What is expected ?

What is actually happening?

Additional comments?

stevefan1999-personal commented Aug 27, 2018

clarkdo commented Aug 27, 2018 • edited

stevefan1999-personal commented Aug 27, 2018 • edited

clarkdo commented Aug 27, 2018 • edited

stevefan1999-personal commented Aug 27, 2018 • edited

clarkdo commented Aug 27, 2018

stevefan1999-personal commented Aug 27, 2018

stevefan1999-personal commented Sep 8, 2018

clarkdo commented Sep 8, 2018 • edited

stevefan1999-personal commented Sep 8, 2018

galvez commented Sep 8, 2018

benfavre commented Sep 21, 2018

lock bot commented Oct 31, 2018

stevefan1999-personal commented Aug 27, 2018 •

edited

clarkdo commented Aug 27, 2018 •

edited

stevefan1999-personal commented Aug 27, 2018 •

edited

clarkdo commented Aug 27, 2018 •

edited

stevefan1999-personal commented Aug 27, 2018 •

edited

clarkdo commented Sep 8, 2018 •

edited