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.

_styledComponents.ServerStyleSheet is not a constructor error

See original GitHub issue

Description

I am getting this webpack error when running yarn deploy for my github page.

"deploy": "gatsby build --prefix-paths && gh-pages -d public",

error Building static HTML for pages failed`

`See our docs page on debugging HTML builds for help https://goo.gl/yL9lND`

  `16 |       setHeadComponents = _ref.setHeadComponents;
  17 |
> 18 |   var sheet = new _styledComponents.ServerStyleSheet();
     | ^
  19 |
  20 |   var app = _react2.default.createElement(
  21 |     _styledComponents.StyleSheetManager,`


`WebpackError: _styledComponents.ServerStyleSheet is not a constructor`

  - gatsby-ssr.js:18 Object.exports.replaceRenderer
    ~/gatsby-plugin-styled-components/gatsby-ssr.js:18:1

  - api-runner-ssr.js:23
    .cache/api-runner-ssr.js:23:41


  - api-runner-ssr.js:21 module.exports
    .cache/api-runner-ssr.js:21:25

  - static-entry.js:113 module.exports
    .cache/static-entry.js:113:3

  - static-entry.js:99 Function.Promise.fromNode.Promise.fromCallback
    .cache/static-entry.js:99:20





error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I am using gatsby-plugin-styled-components: "2.0.2"and styled-components: "2.2.4".

gatsby-pluging-styled-components should have handled the SSR right? or do i still have to configure it manually? it worked fine a few months ago when i deployed the first version of my github page.

Issue Analytics

State:
Created 6 years ago
Comments:6

Top GitHub Comments

8reactions

soroosh123rfcommented, May 27, 2021

I had the same problem and changed the import like this: import { ServerStyleSheets } from '@material-ui/styles' and now it’s working fine again.

4reactions

Boogieman66commented, Mar 11, 2020

For anyone coming here from google… make sure @material-ui/core/styles actually exports ServerStyleSheets

this lead me to realize I’m running an older material-ui/core (3.9.x) fixed by upgrading to 4.5.1

Top Results From Across the Web

trying SSR but got "ServerStyleSheets is not a constructor"

I realized in my @material-ui/core it doens't install ThemeProvider & ServerStyleSheets. I installed @material-ui/styles then it worked. – Hang ...

API Reference - styled-components

Returns a StyledComponent that does not accept children. Place it at the top of your React tree and the global styles will be...

JavaScript-less Static SSR using Styled Components

I used React's ReactDOMServer.renderToStaticMarkup and Styled Components' ServerStyleSheet.collectStyles to render a completely static site with CSS and no JS.

styled-components | Yarn - Package Manager

Use the best bits of ES6 and CSS to style your apps without stress ... If a contribution does not have a mention...

styled-components - UNPKG

The CDN for styled-components. ... insertRule(rule, index);\n this.length++;\n return true;\n } catch (_error) {\n return false;\n }\n }\n\n ...