Khan / aphrodite

Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation
5.35k stars 188 forks source link

SSR Component Library #290

Open 14850842 opened 6 years ago

14850842 commented 6 years ago

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 commented 6 years ago

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

14850842 commented 6 years ago

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 commented 6 years ago

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

14850842 commented 6 years ago

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.