Window is not defined for preact pre-render

[GarliqBread]

Preact pre-render throws an error because window doesn't exist on the render environment :
`
/node_modules/form-data/lib/browser.js

ReferenceError: window is not defined`

`
This is most likely caused by using DOM or Web APIs.
Pre-render runs in node and has no access to globals available in browsers.

Consider wrapping code producing error in: 'if (typeof window !== "undefined") { ... }'
`
I could use the --no-prerender tag on the build command but I really didn't want to use it, is there a work-a-round for this? or should I create a pull-request to add "if (typeof window !== "undefined")..." ?

[enkelmedia]

Getting the same error on version 3.0.0 when performing SSR.

Updating browser.js to this solves the problem but it would be good is this was shipped.

/* eslint-env browser */
module.exports = typeof self == 'object' ? self.FormData : typeof window !='undefined' ? window.FormData : undefined;

Since the SSR does not have a window-object we need to check that it exists, no requests are performed on the server but the rendering will complain about this use of the window-variable.

PR Created: #496

[chrisjingram]

For me, this was caused by the self object not being present globally in the server rendering context.

browser.js in form-data is already set up to check for self in the global context – presence of self means we are in SSR. In that case it provides self.FormData instead of window.FormData. This is where window is undefined comes from when self is undefined.

I fixed this by defining var self = self || this in the global SSR context.

I'm using react_on_rails for server rendering so for me the fix was to monkey patch ReactOnRails::ServerRenderingPool::RubyEmbeddedJavaScript like so:

ReactOnRails::ServerRenderingPool::RubyEmbeddedJavaScript.class_eval do
  def self.console_polyfill
    <<~JS
      var debugConsole = console;
      var console = { history: [] };
      ['error', 'log', 'info', 'warn'].forEach(function (level) {
        console[level] = function () {
          var argArray = Array.prototype.slice.call(arguments);
          if (argArray.length > 0) {
            argArray[0] = '[SERVER] ' + argArray[0];
          }
          console.history.push({level: level, arguments: argArray});
        };
      });
      // patched self and global definitions ------------------
      var global = global || this
      var self = self || this
      // ----------------------------
    JS
  end
end

This won't be relevant for everyone but hopefully provides a clue.