_I'm posting this issue for reference more than anything else, in case others are searching for a fix. The temporary fix is at the end, perhaps it's worth adding that to the `README`?_
---
When using this plugin with a fresh install of Webpack 4 (`4.6.0` in my test) I get the following error:
```
ERROR in ReferenceError: window is not defined
```
Having dug into it further, it appears it is a side effect of [this](https://github.com/webpack/webpack/issues/6677) issue where the `umd` target generates invalid code for running inside a Node.js context.
The temporary fix is detailed [here](https://github.com/webpack/webpack/issues/6642), where you can add the following to your Webpack config to change the global keyword from `window` to `this`:
```
output: {
// ...
globalObject: "this"
}
```
In addition to the fix I outlined at the top of the issue, if you’re still getting `”window” is not defined` errors, I’ve occasionally found it is because my application code is making a call to a DOM API (e.g. `window.location`) which doesn’t exist in Node-land.
Often wrapping these lines in a `if (typeof window !== ‘undefined’) {}` has helped, although that may not be the issue you’re having. Bear in mind this conditional check might have unexpected side effects depending on your exact implementation, so you may need to do some testing around that behaviour.
Starting with a hello-world React setup (no router or anything) and this (partial) Webpack config:
```javascript
output: {
filename: '[name].bundle.js',
path: path.join(__dirname, 'dist'),
libraryTarget: 'umd',
},
plugins: [
new StaticSiteGeneratorPlugin({ crawl: true })
],
```
I got this error on running `webpack` or `webpack-dev-server`:
```
ERROR in ReferenceError: window is not defined
at evalmachine.<anonymous>:1:224
at Script.runInContext (vm.js:107:20)
at Script.runInNewContext (vm.js:113:17)
at module.exports (/Users/martin/Workspace/react-blog/node_modules/eval/eval.js:69:12)
at /Users/martin/Workspace/react-blog/node_modules/static-site-generator-webpack-plugin/index.js:42:22
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/martin/Workspace/react-blog/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:7:1)
at AsyncSeriesHook.lazyCompileHook (/Users/martin/Workspace/react-blog/node_modules/tapable/lib/Hook.js:154:20)
at hooks.optimizeChunkAssets.callAsync.err (/Users/martin/Workspace/react-blog/node_modules/webpack/lib/Compilation.js:1314:32)
at _err0 (eval at create (/Users/martin/Workspace/react-blog/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
at taskRunner.run (/Users/martin/Workspace/react-blog/node_modules/terser-webpack-plugin/dist/index.js:315:9)
```
Following @chrishutchinson's links, and nested ones, I resolved it by adding this to my Webpack config:
```javascript
output: {
globalObject: `typeof self !== 'undefined' ? self : this`
}
```
However, now I get new errors. On running `webpack`, I get:
```
ERROR in ReferenceError: document is not defined
at Module.<anonymous> (evalmachine.<anonymous>:6:44761)
at n (evalmachine.<anonymous>:1:385)
at Object.<anonymous> (evalmachine.<anonymous>:6:1192)
at n (evalmachine.<anonymous>:1:385)
at evalmachine.<anonymous>:1:1184
at evalmachine.<anonymous>:1:1195
at evalmachine.<anonymous>:1:84
at evalmachine.<anonymous>:1:223
at Script.runInContext (vm.js:107:20)
at Script.runInNewContext (vm.js:113:17)
```
And on running `webpack-dev-server`, I get:
```
ERROR in ReferenceError: self is not defined
at Object.<anonymous> (evalmachine.<anonymous>:41534:18)
at Object../node_modules/webpack-dev-server/client/index.js?http://localhost:8080 (evalmachine.<anonymous>:41589:30)
at __webpack_require__ (evalmachine.<anonymous>:30:30)
at Object.0 (evalmachine.<anonymous>:41982:1)
at __webpack_require__ (evalmachine.<anonymous>:30:30)
at evalmachine.<anonymous>:94:18
at evalmachine.<anonymous>:97:10
at webpackUniversalModuleDefinition (evalmachine.<anonymous>:3:20)
at evalmachine.<anonymous>:10:3
at Script.runInContext (vm.js:107:20)
```
`new StaticSiteGeneratorPlugin({
entry: 'entry',
globals: new JSDOM().window
}),`
I came up with this idea. Now I face `ERROR in SecurityError: localStorage is not available for opaque origins` also from this plugin.
Having the same issue here with bootstrap-loader.
ERROR in ./node_modules/bootstrap-loader/no-op.js (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js?sourceMap!./node_modules/resolve-url-loader?sourceMap!./node_modules/postcss-loader/src!./node_modules/sass-loader/lib/loader.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"bootstrapCustomizations":"/Users/wendel.costa/Desktop/qantas/src/shared/styles/01_settings/_bootstrap.scss","extractStyles":true,"styleLoaders":["style-loader","css-loader?sourceMap","resolve-url-loader?sourceMap","postcss-loader","sass-loader?sourceMap"],"styles":["mixins","grid"],"scripts":false,"configFilePath":"/Users/wendel.costa/Desktop/qantas/.bootstraprc","bootstrapPath":"/Users/wendel.costa/Desktop/qantas/node_modules/bootstrap","bootstrapRelPath":"../bootstrap"}!./node_modules/bootstrap-loader/no-op.js)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ReferenceError: window is not defined
facing similar issue on frontend module build from webpack
return window && document && document.all && !window.atob;
^
ReferenceError: window is not defined
this worked for me
```
module.exports = {
...,
plugins: [
new StaticSiteGeneratorPlugin({
globals: {
window: {}
}
})
]
}
```
as documented https://github.com/markdalgleish/static-site-generator-webpack-plugin#globals
@coldpour. Thanks but that does not solve my issue.
I use `servicer worker`, which needs `window` to register itself.
So on my `registerServiceWorker.js` there are several instances of calling the `window` object, like so:
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname === '127.0.0.1' ||
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
There are a few other calls to `window` on the same file, which I skip here for brevity, but you get the idea.
So, when I run `webpack`, I get the following error:
ERROR in TypeError: Cannot read property 'hostname' of undefined
at Module.<anonymous> (evalmachine.<anonymous>:2440:43)
at Module../client/registerServiceWorker.js (evalmachine.<anonymous>:2509:30)
......
Any idea on how to solve that?
> @coldpour. Thanks but that does not solve my issue.
> I use `servicer worker`, which needs `window` to register itself.
> So on my `registerServiceWorker.js` there are several instances of calling the `window` object, like so:
>
> ```
> const isLocalhost = Boolean(
> window.location.hostname === 'localhost' ||
> // [::1] is the IPv6 localhost address.
> window.location.hostname === '[::1]' ||
> // 127.0.0.1/8 is considered localhost for IPv4.
> window.location.hostname === '127.0.0.1' ||
> window.location.hostname.match(
> /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
> )
> );
> ```
>
> There are a few other calls to `window` on the same file, which I skip here for brevity, but you get the idea.
> So, when I run `webpack`, I get the following error:
>
> ```
> ERROR in TypeError: Cannot read property 'hostname' of undefined
> at Module.<anonymous> (evalmachine.<anonymous>:2440:43)
> at Module../client/registerServiceWorker.js (evalmachine.<anonymous>:2509:30)
> ......
> ```
>
> Any idea on how to solve that?
Were you able to fix this?
Not sure if relevant, but I was working on a library meant to run in node env, and was getting this error even after setting `output.globalObject = "this`.
Setting `target: node` got it working for me
```
module.exports = {
entry: "./src/index.ts",
mode: "development",
target: "node",
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: "ts-loader"
}
]
},
resolve: { extensions: [".ts", ".tsx", ".js"] },
output: {
path: path.resolve(__dirname, "dist"),
filename: "index.js",
libraryTarget: "commonjs2",
library: "amp"
},
plugins: []
};
```
A simple `globals` option when initializing the `StaticSiteGeneratorPlugin` did the trick for me.
```
new StaticSiteGeneratorPlugin({
...
globals: {
window: {}
}
})
```
Documentation available [here](https://github.com/markdalgleish/static-site-generator-webpack-plugin#globals).