headless-wp-starter Styled Components with nextjs

I've been trying to use styled-components with this project with out any luck.

I've followed these instructions: https://dev.to/aprietof/nextjs--styled-components-the-really-simple-guide----101c

But I keep getting the same error and cant seem to find out the specific reason. The error in question is: element.type.toLowerCase is not a function

This how I am using styled-components:

import React from 'react';
import styled from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const HeaderLogo = () => {
	return (
		<Title>
			Site title
		</Title>
	);
};
 
export default HeaderLogo;

Do you have any idea what the issue might be?

Dec 03 '18 21:12 Bjornhall

Could you link your repo? I'm using styled components with a fairly large production site built with this boilerplate. Probably just an issue with the ssr, I believe I had some issues with that as well at first.

Dec 20 '18 16:12 freddiemixell

It could because you may need a custom _document.js file for SSR. Take a look below for a boilerplate.

import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet();
    const page = renderPage(App => props => sheet.collectStyles(<App {...props} />));
    const styleTags = sheet.getStyleElement();
    return { ...page, styleTags };
  }

  render() {
    return (
      <html>
        <Head>{this.props.styleTags}</Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

export default MyDocument;

Also this may be helpful: https://github.com/zeit/next.js/tree/canary/examples/with-styled-components

Jan 09 '19 17:01 jacobmishkin