Styled-jsx: StyleSheetRegistry errors

[slaskis]

I believe we found a regression in 2.0 which only shows up in production.

It seems to be some kind of cleanup done by styled-jsx 2.0. Where empty <style jsx>{``}</style>-tags are used sometimes but removed when navigating away which causes this error:

Error: StyleSheetRegistry: styleId: `jsx-2085888330` not found.

I've added a commit to my sample repo which shows the issue when you navigate back and forth between the "pages".

[pramjeet]

I am also facing this issue in production, does anybody know a quick fix for now please?

[giuseppeg]

The quick fix is to not use the optimzeForSpeed mode (or rather set it to false).

@slaskis why would you use an empty style tag?

[pramjeet]

I found some empty <style jsx>{``}</style> and just removed them. It fixed the problem for me.

@giuseppeg Thanks anyway.

[slaskis]

I just updated next to 4 and this started to happen in production.

I don't know why but a colleague of mine does it kind of like a template for new components which will get styles later.

I would understand if it's not supported but a better and maybe more consistent error would be nice. Now it's a pretty aggressive regression which occur when you upgrade.

[giuseppeg]

yup we could filter out empty rules of course :) PR are welcome!

[rockchalkwushock]

FYI beginning work on this, wish me luck 😂 🎃 💩

[williamkunz]

@slaskis Could this be your issue? https://github.com/zeit/styled-jsx/pull/327#issuecomment-338312692

[slaskis]

Looks very interesting!

[bathos]

I’m seeing this error on navigation in IE11 sometimes even though I have no empty Styled JSX elements. It leads to a white screen of death — perhaps this shouldn’t be thrown, or should be thrown asynchronously so as not to prevent render altogether?

[giuseppeg]

As I said to @williamkunz

yeah whenever there is a parse error the rule is ignored. This happens only when optimizeForSpeed is enabled (usually automatically for production builds). To prevent surprises in prod you may want to enable optimizeForSpeed manually (via babel plugin options) while you are developing. When optimizeForSpeed is enabled and process.env.NODE_ENV !== 'production' you should get a warning.

Ideas to improve this are welcome.

[bathos]

Maybe what I’m seeing is a different issue that has the same end result — it’s (a) only in prod and (b) only in IE11, and (c) erratic.

[giuseppeg]

@bathos you may want to enable optimizeForSpeed and debug a bit. Chances are that you have some property or rule that is not valid in IE11 and therefore the whole block is ignored.

[bathos]

Thanks for the guidance, I’ll try that (I misunderstood earlier, thinking that you meant the rule had to be one which was seen as junk by Styled JSX, rather at runtime by the browser).

[zoecarver]

@giuseppeg Is this still an issue? If so, in order to fix the issue would I just need to make it ignore all empty elements (in production/optimizeForSpeed)?

Thanks

[giuseppeg]

@pudility to be honest I wouldn't fix this since empty rules is just one of the many reasons why this could fail. When in dev mode with optimizeForSpeed set to true people should get a warning already.

The action item could be to always set optimizeForSpeed to true and in development add a warning to inform the users that this mode is on and they should turn it off manually if they need source maps or want to edit styles with the dev tools.

This would be a breaking change though so we should reconsider when we will do the next major release.

[giuseppeg]

Gonna lock this conversation.

If anybody is experiencing similar issues, my advice is to set optimizeForSpeed to true in development so that you can catch these issues before your site makes it to prod.

Generally with optimizeForSpeed a ruleset is skipped when it contains invalid (or empty) CSS for the current browser (so it might work on IE but not in Firefox for instance). The solution here is to move browser specific rules to separate rulesets.

If you don't have a lot of dynamic styles (e.g. you don't use props in your styles) another option is to disable optimizeForSpeed in prod i.e. always.

In Next.js you can configure optimizeForSpeed via .babelrc (maybe also using next.config.js but I haven't tried that):

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": { "optimizeForSpeed": true }
      }
    ]
  ]
}

For regular styled-jsx users please read the README.md. optimizeForSpeed is a regular Babel plugin option.

@pudility if you want to help out maybe we can start a FAQ section in the README.md and add the info from this comment.