"Document is not defined" with component library extractCss: false

[saraha33]

Hi everybody,

im not sure if this is a bug or even if yes if it is a nuxt problem (or maybe vue-style-loader?) - im really sorry if it is wrong to post here - please let me know if this should go somewhere different - but for now here we go:

I have this custom library that i want to import to a nuxt project however when I have extractCss false in my library I get a "document is not defined" error message coming from the vue-style-loader addStyle function:

node_modules/vue-package-test-x/HelloA/cjs/index.jsopen in editor
  return styleElement
}

function addStyle (obj /* StyleObjectPart */) {
  var update, remove
  var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')

  if (styleElement) {
    if (isProduction) {
      // has SSR styles and in production mode.
      // simply do nothing.

Versions

• nuxt: v2.13.0
• node: v12.18.2
• vue-style-loader: v4.1.2

Reproduction

Steps to reproduce

the component library is actually just an example test project with not much content - to reproduce the issue one would just need to

npm install --save vue-package-test-x@0.0.2-beta.6 (specifically this version because in other versions i tried to do with extractCss: true* and other stuff)
also the complete code base could be found here

and then have a fresh nuxt project (but i could also put my nuxt project on github if this would help)

and try to use one of the components like so:

<template>
  <div class="container">
    <HelloA />
  </div>
</template>

<script>
import HelloA from 'vue-package-test-x/HelloA';
// alternatively - does not matter - gives same error:
// import { HelloA } from 'vue-package-test-x';

export default {
  components: {
    HelloA,
  },
};
</script>

Additional Details

Standard universal ssr app nuxt.config

export default {
  /*
  ** Nuxt rendering mode
  ** See https://nuxtjs.org/api/configuration-mode
  */
  mode: 'universal',
  /*
  ** Nuxt target
  ** See https://nuxtjs.org/api/configuration-target
  */
  target: 'server',
  /*
  ** Headers of the page
  ** See https://nuxtjs.org/api/configuration-head
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  ** https://nuxtjs.org/guide/plugins
  */
  plugins: [
  ],
  /*
  ** Auto import components
  ** See https://nuxtjs.org/api/configuration-components
  */
  components: true,
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
  ],
  /*
  ** Build configuration
  ** See https://nuxtjs.org/api/configuration-build/
  */
  build: {
  }
}

What is Expected?

the component from the component library should be rendered without error messages

What is actually happening?

error message "document is not defined" as described above

Potentially related issues

I have the feeling this issue sounds similar? vue-style-loader/issues/44
or maybe this one - but it is quite old vue-style-loader/pull/30

[aldarund]

not really about nuxt. you need to build so it wont bundle css with document or it wont work in ssr. And it depends on how you build see https://stackoverflow.com/a/56895041/239354 for vue cli for example. Ask in vue cli community :)

[saraha33]

Alright - thanks for your reply anyways! im just desperate because this used to work (i did not come up with the set up of the component library myself but i modelled it after an example repository and it was definitely working in the past with extractCss false...thats why i thought it might be a nuxt/loader problem...
but i understand why you closed it and will try somewhere else for help - sorry for taking up your time!

[silvio-e]

@saraha33 but it would be great if you share your findings here later. 😊

[saraha33]

@silvio-e - sure definitely! :)

[aldarund]

i didnt really used vue cli for building, cant help, but in rollup with same issue you need to pass extract: false to rollup vue plugin and it will work

[saraha33]

ok i somewhat found out what the problem is - in my component library i have defined in my package.json:

{
    "main": "cjs/index.js", (a commonJS build file)
    "module": "index.js" (pointing to the component(s))
}

and it seems for some reason nuxt/webpack uses the "main" (so cjs) build not the "module" reference (and it seems nuxt cant handle the cjs build?)...if i change it to "main": "index.js" (so pointing to the component directly) everything works - also with css: { extract: false }; now im just stuck on why nuxt/webpack is not using the module reference...