Error: 'window is not defined' with Webpack 4 #130

chrishutchinson · 2018-04-23T12:51:23Z

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 issue where the umd target generates invalid code for running inside a Node.js context.

The temporary fix is detailed here, where you can add the following to your Webpack config to change the global keyword from window to this:

output: {
  // ...
  globalObject: "this"
}

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

kavehsajjadi · 2018-06-06T10:44:31Z

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

lorenzo-w · 2018-07-17T12:49:30Z

@kavehsajjadi same here. "self" is not defined now

dongdongmao · 2018-10-29T08:58:16Z

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

chrishutchinson · 2018-10-29T09:01:38Z

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.

MartinRosenberg · 2018-12-08T06:28:39Z

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)

t47io · 2019-01-05T01:51:35Z

Same here. The globalObject: "this" tricked did work for me once, but when I introduced mini-css-extract-plugin, it no longer does.

darkouz · 2019-01-15T21:06:40Z

Still the same problem over here, is there someone with some solution ?

ufhy · 2019-01-19T06:52:34Z

up

ArcusDeri · 2019-01-24T10:13:10Z

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.

wendelcosta · 2019-01-24T11:34:24Z

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

ssbarbee · 2019-05-10T14:34:01Z

Bump

BernardA · 2019-06-01T16:32:52Z

Having the same issue. Please see webpack.config below

Thanks

  const {InjectManifest} = require('workbox-webpack-plugin');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const ManifestPlugin = require('webpack-manifest-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractCssChunks = require("extract-css-chunks-webpack-plugin");
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
 const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
 const path = require('path');
 //const StyleExtHtmlWebpackPlugin = require("style-ext-html-webpack-plugin");
 const StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin');


 module.exports = {
mode: "development",
entry: "./client/index.js",
output: {
    path: __dirname+'/public/dist',
    filename: "[name].[contenthash].js",
    publicPath: "/dist/",
    libraryTarget: 'umd'
},
devtool: "source-map",
devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  },
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
            }
        },
        {
            test: /\.css$/,
            use: [
                ExtractCssChunks.loader,
                "css-loader",
                {
                    loader: "postcss-loader",
                    options: {
                        ident: "postcss",
                        plugins: (loader) => [
                            require('postcss-import')(),
                            require('postcss-preset-env')(),
                            require('autoprefixer')(),
                            require('cssnano')()
                        ]
                    }
                }
            ]
        }
    ]
},
plugins: [
    new HardSourceWebpackPlugin(),
    new CleanWebpackPlugin(['public/dist/*.*', 'public/img-cache/*.*']),
    new ExtractCssChunks( // old new MiniCssExtractPlugin( note sideEffect config on package.json for production
        {
            filename: "[name].[contenthash].css",
            chunkFilename: "[id].css"
        }
    ),
    new HtmlWebpackPlugin({
        showErrors: true,
        template: 'templates/webpack.html.twig', // base template
        filename: '../../templates/base.html.twig', // output
        inlineSource: '.(css)$' // embed all css inline
    }),
    // disable for development
    //new HtmlWebpackInlineSourcePlugin(), 
    //new StyleExtHtmlWebpackPlugin(),
    // disable copy while in development
    /*
    new CopyWebpackPlugin([
        { 
            from: './assets/img/', 
            to: '../img-cache/[name].070219.[ext]',
            //to: '../img/'
        },
    ]),
    */
    new StaticSiteGeneratorPlugin({
        crawl: true
    }),
    new ManifestPlugin(),
    new InjectManifest({
        swSrc: './client/sw-src.js',
        swDest: '../sw.js',
        exclude: [/\.twig$/, /\.DS*/],
    }),
],

}

lorenzocadamuro · 2019-06-13T10:35:25Z

Same issue... So is it not possible to use it with webpack-dev-server? 🤨

AjitTK · 2019-06-17T10:08:00Z

facing similar issue on frontend module build from webpack

return window && document && document.all && !window.atob;
^
ReferenceError: window is not defined

coldpour · 2019-09-02T18:14:52Z

this worked for me

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

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

BernardA · 2019-09-17T07:19:14Z

@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?

lofimob · 2020-04-10T09:53:13Z

@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?

BernardA · 2020-04-10T11:18:10Z

@lofimob That was many moons ago!
I'll see if I can go back and check, but make no promises.

ags1773 · 2020-06-05T03:16:14Z

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

brettdewoody · 2020-08-11T17:46:51Z

A simple globals option when initializing the StaticSiteGeneratorPlugin did the trick for me.

new StaticSiteGeneratorPlugin({
    ...
    globals: {
      window: {}
    }
  })

Documentation available here.

matthewlyle mentioned this issue Jan 25, 2019

[NDS-536] fix webpack error nulogy/design-system#132

Merged

annelin07 mentioned this issue Mar 18, 2019

"self" is not defined error on server side generated entry file gregberge/loadable-components#276

Closed

svnm mentioned this issue Mar 18, 2019

update to react-router v4 svnm/static-site-generator-webpack-plugin-example#1

Open

jbghoul mentioned this issue Mar 20, 2019

Resolve 'window is not defined' with webpack config wanadev/gltf-bounding-box#10

Merged

bl00mber mentioned this issue Apr 4, 2019

window is not defined bl00mber/react-phone-input-2#87

Closed

alex-cory mentioned this issue Apr 18, 2019

Development ava/use-http#4

Closed

y0c mentioned this issue May 4, 2019

[Re-open] ISSUE-11 window 네임스페이스 추가 sat10am/sat10am-blog#40

Merged

zakjan mentioned this issue Mar 12, 2020

Bundle can't be imported in non-browser environments since 0.15.0 graphology/graphology#130

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error: 'window is not defined' with Webpack 4 #130

Error: 'window is not defined' with Webpack 4 #130

chrishutchinson commented Apr 23, 2018 •

edited

kavehsajjadi commented Jun 6, 2018

lorenzo-w commented Jul 17, 2018

dongdongmao commented Oct 29, 2018

chrishutchinson commented Oct 29, 2018 •

edited

MartinRosenberg commented Dec 8, 2018 •

edited

t47io commented Jan 5, 2019

darkouz commented Jan 15, 2019

ufhy commented Jan 19, 2019

ArcusDeri commented Jan 24, 2019

wendelcosta commented Jan 24, 2019

ssbarbee commented May 10, 2019

BernardA commented Jun 1, 2019

lorenzocadamuro commented Jun 13, 2019

AjitTK commented Jun 17, 2019

coldpour commented Sep 2, 2019

BernardA commented Sep 17, 2019

lofimob commented Apr 10, 2020

BernardA commented Apr 10, 2020

ags1773 commented Jun 5, 2020

brettdewoody commented Aug 11, 2020

Error: 'window is not defined' with Webpack 4 #130

Error: 'window is not defined' with Webpack 4 #130

Comments

chrishutchinson commented Apr 23, 2018 • edited

kavehsajjadi commented Jun 6, 2018

lorenzo-w commented Jul 17, 2018

dongdongmao commented Oct 29, 2018

chrishutchinson commented Oct 29, 2018 • edited

MartinRosenberg commented Dec 8, 2018 • edited

t47io commented Jan 5, 2019

darkouz commented Jan 15, 2019

ufhy commented Jan 19, 2019

ArcusDeri commented Jan 24, 2019

wendelcosta commented Jan 24, 2019

ssbarbee commented May 10, 2019

BernardA commented Jun 1, 2019

lorenzocadamuro commented Jun 13, 2019

AjitTK commented Jun 17, 2019

coldpour commented Sep 2, 2019

BernardA commented Sep 17, 2019

lofimob commented Apr 10, 2020

BernardA commented Apr 10, 2020

ags1773 commented Jun 5, 2020

brettdewoody commented Aug 11, 2020

chrishutchinson commented Apr 23, 2018 •

edited

chrishutchinson commented Oct 29, 2018 •

edited

MartinRosenberg commented Dec 8, 2018 •

edited