TypeError: styleSheet.getName is not a function when importing components from npm based react libs using styled-components

0
votes

Context

I'm writing a react component library based on Styled Components in NPM to be shared across my downstream React projects.

All of my projects are isomorphic React apps. They implement Styled components server-side rendering (SSR) as outlined in the official documentation as such:

import { ServerStyleSheet } from 'styled-components';

const sheet = new ServerStyleSheet();
const html = ReactDOMServer.renderToString(sheet.collectStyles(App));
const css = sheet.getStyleElement().map((el, idx) => (el ? React.cloneElement(el, { key: idx }) : el));
const page = <Html content={html} state={apolloState} assetMap={assetMap} css={css} helmet={helmet} />;
res.send(`<!doctype html>\n${ReactDOMServer.renderToStaticMarkup(page)}`);
res.end();

Problem

When I import a component from my aforementioned react component library from npm and call it in my project, I get the following error:

TypeError: styleSheet.getName is not a function
    at ComponentStyle.generateAndInjectStyles (/project/node_modules/my-react-component-library/node_modules/styled-components/lib/models/ComponentStyle.js:95:37)
    at StyledComponent.generateAndInjectStyles (/project/node_modules/my-react-component-library/node_modules/styled-components/lib/models/StyledComponent.js:154:40)
    at StyledComponent.componentWillMount (/project/node_modules/my-react-component-library/node_modules/styled-components/lib/models/StyledComponent.js:192:40)
    ...

Questions

  1. Is this problem coming from my npm library not enabling SSR or the end-user implementation of the styled components ssr?

  2. How can this be solved?

1
reactjsstyled-componentsserver-side-rendering

1 Answers

0
votes

I solved this by exporting the stylesheet via webpack's ExtractTextPlugin in the upstream npm react library and calling it from my downstream app.