build error ReferenceError: window is not defined

[F-one-1]

Discussed in #515

^{Originally posted by F-one-1 November 6, 2021}
Description
Hi all, I try to "docs:build": "vuepress build docs", but the error occur. "docs:dev": "vuepress dev docs", is OK

Incident

> Executing task: yarn run docs:build <

yarn run v1.22.10
$ vuepress build docs
info Initializing VuePress and preparing data...
✔ Compiling with webpack - done
✖ Rendering pages - failed
ReferenceError: window is not defined
    at Object.1589 (D:\vscode\Vue\ddd\dist\.server\app.js:90240:31)        
    at __webpack_require__ (D:\vscode\Vue\ddd\dist\.server\app.js:94275:42)
    at Module.9367 (D:\vscode\Vue\ddd\dist\.server\app.js:2444:17)
    at __webpack_require__ (D:\vscode\Vue\ddd\dist\.server\app.js:94275:42)
    at Module.3034 (D:\vscode\Vue\ddd\dist\.server\app.js:3588:9)
    at __webpack_require__ (D:\vscode\Vue\ddd\dist\.server\app.js:94275:42)
    at D:\vscode\Vue\ddd\dist\.server\app.js:94411:37
    at Object.<anonymous> (D:\vscode\Vue\ddd\dist\.server\app.js:94414:12) 
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.   
The terminal process "C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe -Command yarn run docs:build" terminated with exit code: 1.

clientAppEnhance.js

import './fit.js'
import { defineClientAppEnhance } from '@vuepress/client'
import d from './components/d.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import index from '../../package/index'
import '../../package/style.scss'
import mycode from './components/mgcode.vue'


export default defineClientAppEnhance(({ app, router, siteData }) => {
  app.component('d', d)
  app.component('mycode', mycode)
  app.use(ElementPlus)
  app.use(index)
  app.use(router)
})

fit.js

if (typeof global === 'undefined') {
  global = this
}

I don't know that the problem may be in webpack or the clientAppEnhance.js config.js

[Mister-Hope]

Make sure all your components are SSR-friendly. VuePress use SSR rendering to provide html files for search engines to index content, so you can only visit window in some lifecycles which only invoke at client side, e.g.onMounted

[F-one-1]

add
sorry, I know the problem is I use the window in my components and its be used in vuepress-next.

computed: {
     currentX() {
        const x = (window.innerWidth - this.currentWidth) / 2
        return parseSize(this.left, window.innerWidth, x)
      },
      currentY() {
        const y = (window.innerHeight - this.currentHeight) / 2
        return parseSize(this.top, window.innerHeight, Math.max(y - 50, y))
     },

how to fix it?

It seem not ok
#2784

[F-one-1]

Make sure all your components are SSR-friendly. VuePress use SSR rendering to provide html files for search engines to index content, so you can only visit in some lifecycles which only invoke at client side, e.g.window``onMounted

Ok,I understand. Thanks a lot

[Mister-Hope]

The thing you should know that window is not reactive, and user can change window size.

You should give up using computed, initialize some variable first with default value, and update them in onMounted.

Then you use watch to watch deps and update that value when necessary, and do not forget to use window.addEventListener to watch window size change event to update them in onMounted either. Also please remember to move it in onUnmounted.

You can create a composition if they are commonly used. You can also use vueuse package.

These kind of issues, which is not VuePress related, should be better posted on vue forum or stackoverflow, instead of issue panel here

[F-one-1]

yeah,I hadn't noticed that before. Thanks 🦏

[PolanZ]

import the third party pack, use externals Not work?

bundlerConfig: {
  chainWebpack: (config: WebpackChainConfig) => {
    config.externals({
      'xxx': 'xxx',
    });
  },
},

[xtqjh]

vuepress build docs
✔ Compiling with vite - done in 21.26s
✖ Rendering 9 pages - failed in 964ms
ReferenceError: window is not defined
at eval (webpack://fokUtils/./core/dom/scrollTo.js?:12:3)
at eval (webpack://fokUtils/./core/dom/scrollTo.js?:15:2)
at Object../core/dom/scrollTo.js (/Users/xtqjh/Sites/阜康/fk-his/fok-library-his/node_modules/fok-utils/fok-utils.js:1040:1)
at webpack_require (/Users/xtqjh/Sites/阜康/fk-his/fok-library-his/node_modules/fok-utils/fok-utils.js:1622:41)
at webpackContext (webpack://fokUtils/./core/sync^./.+/.+.js$?:78:9)
at eval (webpack://fokUtils/./core/index.js?:9:25)
at Array.forEach ()
at eval (webpack://fokUtils/./core/index.js?:7:10)
at Object../core/index.js (/Users/xtqjh/Sites/阜康/fk-his/fok-library-his/node_modules/fok-utils/fok-utils.js:1105:1)
at webpack_require (/Users/xtqjh/Sites/阜康/fk-his/fok-library-his/node_modules/fok-utils/fok-utils.js:1622:41)

[meteorlxy]

@xtqjh If you have any questions, please go to the discussion panel