styled-components: production style inject throws error

Actionable

(Added by @kitten)

Improve error message in insertRuleHelpers’ sheetForTag function, to hint at the fact that a style tag/sheet is not mounted, has been removed. Also add a hint, that this might indicate that the tags were manipulated by another library for instance of styled-components

https://github.com/styled-components/styled-components/blob/master/src/utils/insertRuleHelpers.js#L19-L20

Original issue report

Currently running into an issue where the development build is fine on 3.1.6, but the production build throws the following error:

common.js:663 Error
    at sheetForTag (ap2.js:601)
    at t.inject (ap2.js:601)
    at e.inject (ap2.js:601)
    at r.generateAndInjectStyles (ap2.js:601)
    at r.t.generateAndInjectStyles (ap2.js:601)
    at ap2.js:601
    at n (ap2.js:601)
    at r.t.componentWillMount (ap2.js:601)
    at mountClassInstance (common.js:662)
    at beginWork (common.js:662)

Kind of amusing that in the original code: This should never happen😂

// Source: https://github.com/threepointone/glamor/blob/master/src/sheet.js#L32-L43
var sheetForTag = function sheetForTag(tag) {
  if (tag.sheet) {
    // $FlowFixMe
    return tag.sheet;
  }

  for (var i = 0; i < document.styleSheets.length; i += 1) {
    if (document.styleSheets[i].ownerNode === tag) {
      // $FlowFixMe
      return document.styleSheets[i];
    }
  }

  // NOTE: This should never happen
  throw new Error('');
};

Version

npx envinfo --packages --markdown (filtered a bit)

System:

OS: macOS High Sierra 10.13

Binaries:

Node: 8.9.4
Yarn: 1.3.2
npm: 5.6.0

Browsers:

Chrome: 63.0.3239.132

Packages:

browserify: ^14.1.0 => 14.5.0
jest-styled-components: ^4.11.0-1 => 4.11.0-1
styled-components: ^3.1.6 => 3.1.6

Reproduction

Working on it ¯_(ツ)_/¯

Steps to reproduce

Working on it ¯_(ツ)_/¯

Expected Behavior

No Error, rendered page

Actual Behavior

Error, everything breaks

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 15 (14 by maintainers)

Most upvoted comments

Yea I had the same error, got me very confused.

  // NOTE: This should never happen
  throw new Error('');

wasn’t really helpful in finding out what the problem was. 😀

In the end it was simply because of double importing of styled-components but which was made less obvious with React working properly and styled-components too in dev-environment. Maybe add check for double importing? Or at least add // Have you accidentally double-imported your styled-components? before the throw Error().

TeemuKoivisto on Feb 28, 2018

@mxstbr I feel like the StyleSheetManager would definitely be a nice solution! Unfortunately—as discussed in DMs—the manager’s sheet/target is not working in all edge cases and scenarios yet 😢

Edit: Although on second thought, this is not pressing, since the original issue had nothing to do with speedy per se.

kitten on Feb 8, 2018

Fixed.

Once again, not really a styled-components bug, but a footgun that should perhaps at least be documented (I volunteer as tribute). Unlike in previous versions, it looks like you cannot have more than one copy of the code in your application, or this can happen. Seems like 2.4.0 and earlier are happy enough with multiple instances.

Turns out that styled-components was included in both bundles that were loaded, and upon loading the second bundle something bad happened. I’m assuming styled-components does something on init that is incompatible with another instance? It would be great if there was a warning in the console about this like react with the same issue. Discussion here.

Most interesting about this is that it works fine in dev, but prod it breaks because of the SPEEDY enhancements. Is there an blessed/easy way to enable/disable this?

Thank you so much for your help!

tabrindle on Feb 6, 2018