How to create a styled-component library package to work with Gatsby

Question

I'm trying to create a styled component library package so I can reuse my styles for different projects.

To test how to do this I have two projects.

ExampleStyledComponent - Where I'm trying to build out my components.
Gatsby project - A simple 'Gatsby new .' project

I managed to get my test component showing in the browser correctly with 'npm link' but when I apply the styles I keep getting an 'Invalid hook call' error in the browser.

package -

- src
    - TestComponent.js
- index.js
- package.json

TestComponent.js -

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

const Container = styled.div`
    width: 100%;
    background-color: red;
`;

const TestComp = () => {
    return (
        <Container>
            <h1>Hello World</h1>
        </Container>
    );
};

export default TestComp;

index.js -

import TestComponent from './src/TestComponent';

export default TestComponent;

package.json -

{
    "name": "ExampleStyledComponent",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "peerDependencies": {
        "react": "16.x",
        "styled-components": "5.x"
    },
    "dependencies": {},
    "devDependencies": {
        "babel-plugin-styled-components": "^1.11.1",
        "react": "^16.13.1",
        "styled-components": "^5.1.1"
    }
}

Without styled-components this setup works fine. So how do I get styled components working in my npm-package. I have tried installing the dependencies in my Gatsby project as well but had no luck.

In my Gatsby project dependencies -

    "dependencies": {
        "babel-plugin-styled-components": "^1.11.1",
        "gatsby": "^2.24.42",
        "gatsby-image": "^2.4.15",
        "gatsby-plugin-manifest": "^2.4.22",
        "gatsby-plugin-offline": "^3.2.23",
        "gatsby-plugin-react-helmet": "^3.3.10",
        "gatsby-plugin-sharp": "^2.6.26",
        "gatsby-plugin-styled-components": "^3.3.10",
        "gatsby-source-filesystem": "^2.3.24",
        "gatsby-transformer-sharp": "^2.5.12",
        "prop-types": "^15.7.2",
        "react": "^16.12.0",
        "react-dom": "^16.12.0",
        "react-helmet": "^6.1.0",
        "styled-components": "^5.1.1"
    },

and gatsby-config.js

module.exports = {
    siteMetadata : {
        title       : `Gatsby Default Starter`,
        description : `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
        author      : `@gatsbyjs`
    },
    plugins      : [
        `gatsby-plugin-styled-components`,
        `gatsby-plugin-react-helmet`,
        {
            resolve : `gatsby-source-filesystem`,
            options : {
                name : `images`,
                path : `${__dirname}/src/images`
            }
        },
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sharp`,
        {
            resolve : `gatsby-plugin-manifest`,
            options : {
                name             : `gatsby-starter-default`,
                short_name       : `starter`,
                start_url        : `/`,
                background_color : `#663399`,
                theme_color      : `#663399`,
                display          : `minimal-ui`,
                icon             : `src/images/gatsby-icon.png`
    ]
};

How I am importing it into the Gatsby index.js page -

import React from 'react';
import Test from 'examplestyledcomponent';

const IndexPage = () => (
    <div>
        <Test />
    </div>
);

export default IndexPage;

The error I'm getting in the browser looks like this -

I'm really lost with this so any help would be appreciated, thanks!

jlengstorf jlengstorf · Accepted Answer · 2020-08-12T16:53:36

Gatsby needs a plugin to support styled-components due to SSR restrictions

their docs go into detail: https://www.gatsbyjs.org/docs/styled-components/

the short version is to add this to your Gatsby site:

npm i gatsby-plugin-styled-components styled-components babel-plugin-styled-components

then, in gatsby-config.js:

module.exports = {
  plugins: [
    'gatsby-plugin-styled-components',
  ]
};

that should get you up and running!

How to create a styled-component library package to work with Gatsby

1 Answers