Server pre-rendering support

[aluxian]

I am using webpack and server pre-rendering. Halogen tries to access document and the server crashes:

/Users/aluxian/Projects/Fou/frontend/node_modules/halogen/node_modules/react-kit/getVendorPropertyName.js:3
var div = document.createElement('div');
          ^
ReferenceError: document is not defined
    at Object.<anonymous> (/Users/aluxian/Projects/Fou/frontend/node_modules/halogen/node_modules/react-kit/getVendorPropertyName.js:3:11)
    at Module._compile (module.js:430:26)
    at Object.Module._extensions..js (module.js:448:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/aluxian/Projects/Fou/frontend/node_modules/halogen/node_modules/react-kit/appendVendorPrefix.js:3:29)
    at Module._compile (module.js:430:26)
    at Object.Module._extensions..js (module.js:448:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/aluxian/Projects/Fou/frontend/node_modules/halogen/PulseLoader.js:2:14)
    at Module._compile (module.js:430:26)

I'd love to use it, but I can't.. is there a quick fix for this or would you have to take a deeper look and change how things work inside the components?

[joshhornby]

There is a hacky fix

const isBrowser = typeof window !== 'undefined';

render() {
      let spinner;

      if(isBrowser) {
        var Loader = require('halogen/ScaleLoader');
        spinner = ( <Loader color={this.props.colour} size={this.props.size} margin={this.props.margin} />);
      } else {
        spinner = (<div></div>);
      }

      return (
          <div>
               {spinner}
          </div>
      );
};

[ntucker]

+1

[raulanatol]

Waiting for https://github.com/yuanyan/domkit/pull/7