应用错误收集

TypeError：使用基于样式的组件从基于npm的React库导入组件时，styleSheet.getName不是函数

时间：2018-08-03 03:28:34

标签： reactjs serverside-rendering styled-components ssr

上下文

我正在NPM中基于Styled Components编写一个React组件库，以便在我的下游React项目之间共享。

我所有的项目都是同构的React应用程序。他们以outlined in the official documentation的形式实现样式化组件的服务器端呈现（SSR）：

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();

问题

当我从npm的上述react组件库中导入组件并在项目中调用它时，出现以下错误：

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)
    ...

问题

此问题是否出自我的npm库，未启用SSR或样式组件ssr的最终用户实现？
如何解决？

1 个答案:

答案 0 :(得分：0)

我通过在上游npm react库中通过webpack的ExtractTextPlugin导出样式表并从下游应用程序中调用来解决此问题。