SSR Component Library

[sergiopellegrini]

We have a component library with components styled using aphrodite.

When importing this into a server-side rendered project the components we get the following error:

Error: Cannot automatically buffer without a document

npm packaged component

import React from "react";
import { StyleSheet, css } from "aphrodite";

const Card = () => {
  const baseStyles = StyleSheet.create({
    container: {
      color: "blue"
    }
  });

  return (<p className={css(baseStyles.container)}>Card</p>);
}

export default Card;

SSR Rendered App

import React from 'react';
import { Card } from 'component library here';

export const App = () =>
  <div>
    <Card/>
  </div>;


export default App;

If I use an aphrodite styled component within the application it runs with no issue.

[lencioni]

@14850842 Does this documentation help at all? https://github.com/khan/aphrodite#server-side-rendering

[sergiopellegrini]

Yeah I have that working fine when using components built within the same repository. Once I import from our remote component repository I get the error.

[lencioni]

Is it possible that you have two different copies of Aphrodite in your bundle? Perhaps one as a nested dependency?

[sergiopellegrini]

Ok I have made some progress, I am using npm link to link to the local repository of the component library, if I install to the remote library and remove the link the issue is solved.