systemjs / plugin-css

CSS loader plugin
MIT License
92 stars 60 forks source link

CSSPluginBase.prototype.instantiate does not check if it is running in a browser. #111

Closed mikol-styra closed 7 years ago

mikol-styra commented 7 years ago

See: https://github.com/systemjs/plugin-less/issues/6

When I try to use plugin-less in conjunction with server-side rendering, I get the following error:

err  (SystemJS) document is not defined
  ReferenceError: document is not defined
      at SystemJSNodeLoader.CSSPluginBase.instantiate (/path/to/jspm_packages/github/systemjs/plugin-css@0.1.30/css-plugin-base.js:64:24)
  Error loading /path/to/style.less!/path/to/jspm_packages/github/systemjs/plugin-less@0.1.2/less.js as "./style.less!" from /path/to/style.js

The root cause of the problem is CSSPluginBase.prototype.instantiate(), which attempts to inject a style element into the DOM without document being defined:

CSSPluginBase.prototype.instantiate = function(load) {
  if (this.builder)
    return;

  var style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = load.metadata.style;
  document.head.appendChild(style);
};

Explicitly checking if document is defined in CSSPluginBase.prototype.instantiate() seems appropriate and works for me in practice:

  if (this.builder || typeof document === 'undefined')
    return;

But maybe that is not desirable for some reason?

mikol-styra commented 7 years ago

Note that this is against 0.1.30 because that is what plugin-less depends on.

guybedford commented 7 years ago

Sure, a PR here would be welcome!

mikol-styra commented 7 years ago

Great! PR on its way. Are there any docs describing how to build and test? I haven’t been able to find any or to get anything going through trial and error.