Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error: Can't collect styles once you've called getStyleTags!

See original GitHub issue

I am using this component "styled-components": "^2.1.1" in my VulcanJS app

This code is a server-side code:

import { ServerStyleSheet } from 'styled-components';

I am using the following code in my app

const sheet = new ServerStyleSheet();
console.log(sheet.getStyleTags())

sheet.getStyleTags() is generating the following error:

url:  /
I20171025-11:02:07.279(5.5)? [Error: Can't collect styles once you've called getStyleTags!]
W20171025-11:02:07.292(5.5)? (STDERR) Wed Oct 25 2017 11:02:07 GMT+0530 (IST) 'error while server-rendering' 'Error: Can\'t collect styles once you\'ve called getStyleTags!\n    at ServerStyleSheet.collectStyles (/home/deligence/1.Projects/Streetail/node_modules/styled-components/lib/models/ServerStyleSheet.js:116:28)\n    at generateSSRData (packages/vulcan:routing/lib/server/router.jsx:58:35)\n    at sendSSRHtml (packages/vulcan:routing/lib/server/router.jsx:87:45)\n    at packages/vulcan:routing/lib/server/router.jsx:149:11\n    at /home/deligence/1.Projects/Streetail/node_modules/react-router/lib/match.js:67:5\n    at /home/deligence/1.Projects/Streetail/node_modules/react-router/lib/createTransitionManager.js:108:11\n    at done (/home/deligence/1.Projects/Streetail/node_modules/react-router/lib/AsyncUtils.js:79:19)\n    at /home/deligence/1.Projects/Streetail/node_modules/react-router/lib/AsyncUtils.js:85:7\n    at getComponentsForRoute (/home/deligence/1.Projects/Streetail/node_modules/react-router/lib/getComponents.js:11:5)\n    at /home/deligence/1.Projects/Streetail/node_modules/react-router/lib/getComponents.js:35:5'

Here this is the complete code see the line no- 57 and 59

Issue Analytics

State:
Created 6 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

kittencommented, Feb 7, 2018

@kushalmahajan You have to create a new ServerStyleSheet on every rerender.

Conceptually this is because internally we do store a lot of styles, but for each server-side render you only want the critical ones, the ones that have been used on the given component tree.

0reactions

kittencommented, Feb 7, 2018

@kushalmahajan That is probably a mistake in your code. Can you please avoid posting on old issues and create a new one instead? 😉

Top Results From Across the Web

Can't change style : display using getelementbyclassname

Can't change style : display using getelementbyclassname · with getElementsByClassName you are getting HTMLCollection so try document.

Dynamic Styling Using the Element API - Vaadin

getStyle () : Gets the style instance to manage element inline styles. Using classLists and classNames. You can use the getClassList method to...

HTML DOM Style backgroundColor Property - W3Schools

The backgroundColor property sets or returns the background color of an element. See Also: HTML Styles: The background Property. CSS Tutorial: CSS Backgrounds....

.css() | jQuery API Documentation

The .css() method is a convenient way to get a computed style property from the first matched element, especially in light of the...

Use expressions to edit and access text properties

Edit text styles and text properties using expression controls. ... if style attributes from multiple text layers are being combined.