static-site-generator-webpack-plugin: Error: 'window is not defined' with Webpack 4

i added globalObject: "this" still not fix ERROR in window is not defined

up

this worked for me

module.exports = {
  ...,
  plugins: [
    new StaticSiteGeneratorPlugin({
      globals: {
        window: {}
      }
    })
  ]
}

as documented https://github.com/markdalgleish/static-site-generator-webpack-plugin#globals

Bump

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:

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:

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)

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

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: []
};

@kavehsajjadi same here. “self” is not defined now

@chrishutchinson is there some magic involved with getting that fix to work? I’m getting Invalid configuration object errors