gatsby-plugin-styled-components 2.0.1 and styled-components 3.2.1

[hihellosm]

Description

Just a heads up gatsby-plugin-styled-components 2.0.1 doesn't play well with the latest styled-components 3.2.1 in production. In development it's working fine however when building and deploying (to Netlify) it wasn't matching things up. I could see css class definitions and html class attributes but for some reason they weren't being applied.

The current fix for me was to downgrade -> "styled-components": "^2.2.3"

Steps to reproduce

Using:
"gatsby-plugin-styled-components": "^2.0.1",
"styled-components": "^3.2.1"

Expected result

Should work in build if working in development.

Actual result

After running gatsby build and pushing to git remote the result on the server loads with no errors however the CSS isn't applied.

Environment

• Gatsby version npm list gatsby): [email protected]
• gatsby-cli version (gatsby --version): 1.1.45
• Node.js version: v8.9.4
• Operating System: MAC

File contents (if changed):

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: 'Foo Bar',
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/src/data/posts`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1600,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          'gatsby-remark-prismjs',
          'gatsby-remark-copy-linked-files',
          'gatsby-remark-smartypants',
        ],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        //trackingId: `ADD YOUR TRACKING ID HERE`,
      },
    },
  ],
};

package.json:

{
  "name": "hello.sm",
  "description": "hello.sm",
  "version": "1.0.0",
  "author": "Scott Mackenzie <[email protected]>",
  "dependencies": {
    "gatsby": "^1.9.223",
    "gatsby-link": "^1.6.38",
    "gatsby-plugin-favicon": "^2.1.1",
    "gatsby-plugin-google-analytics": "^1.0.22",
    "gatsby-plugin-react-helmet": "^2.0.6",
    "gatsby-plugin-sharp": "^1.6.41",
    "gatsby-plugin-styled-components": "^2.0.1",
    "gatsby-plugin-typography": "^1.7.18",
    "gatsby-remark-copy-linked-files": "^1.5.30",
    "gatsby-remark-images": "^1.5.56",
    "gatsby-remark-prismjs": "^1.2.17",
    "gatsby-remark-responsive-iframe": "^1.4.18",
    "gatsby-remark-smartypants": "^1.4.12",
    "gatsby-source-filesystem": "^1.5.27",
    "gatsby-transformer-remark": "^1.7.36",
    "gatsby-transformer-sharp": "^1.6.22",
    "lodash": "^4.17.5",
    "react-helmet": "^5.2.0",
    "react-styled-flexboxgrid": "^2.2.0",
    "styled-components": "^2.2.3"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.11.1"
  }
}

gatsby-node.js:

const _ = require('lodash')
const path = require(`path`);
const { createFilePath } = require(`gatsby-source-filesystem`);

// Look for and create slugs
exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
  const { createNodeField } = boundActionCreators;
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
};

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators
  return new Promise((resolve, reject) => {
    graphql(`
      {
        allMarkdownRemark {
          edges {
            node {
              fields {
                slug
              }
            }
          }
        }
      }
    `
    ).then(result => {
      // Create blog posts pages.
      const blogPost = path.resolve(`./src/templates/post.js`);
      const posts = result.data.allMarkdownRemark.edges;

      _.each(posts, (post, index) => {
        const previous = index === posts.length - 1 ? false : posts[index + 1].node;
        const next = index === 0 ? false : posts[index - 1].node;

        createPage({
          path: post.node.fields.slug,
          component: blogPost,
          context: {
            slug: post.node.fields.slug,
            previous,
            next,
          },
        })
      })
      resolve()
    })
  })
};

gatsby-browser.js: not changed
gatsby-ssr.js: not changed

[tsriram]

I tried this with Gatsby's using-styled-components using gatsby-plugin-styled-components 2.0.1 and styled-components 3.2.1 and the build seems to work fine. Is there a sample repo where we can check this issue?

[sheeldotme]

I too am experiencing the issue running with the following dependencies:

gatsby: 1.9.206
gatsby-plugin-styled-components: 2.0.8
styled-components: 3.2.1

downgrading styled-components to 2.4.0 solves the issue for me and is an acceptable fix in the short term.

[KyleAMathews]

A site reproducing the problem would be helpful.

Also if someone could investigate what changed between Styled Components v2 and v3 and why that'd affect our plugin.

[busticated]

i can repro this in my site using styled-components v3.2.3 - i swear i saw a blog post saying that SSR had major changes but 🤷‍♂️

[HumidBrains]

I just experienced the same problem, but in dev build. I used gatsby-plugin-styled-components 2.0.11 and styled-components 3.2.6. What happens is that the styles get applied in the header, but they take no effect on any of the pages. No SSR implemented. Tested downgrading styled-components to 2.4.0 and indeed it applies the styles correctly.

[Chuloo]

Hey @HumidBrains can you send in a sample reproduction repo of this code with the error?

[lukethacoder]

Installing the 'next' version of the gatsby-plugin-styled-components worked for me. No more issues with styles 'popping' in on live sites. Can use the latest version of styled-components too.

npm install --save gatsby-plugin-styled-components@next

Ref: https://github.com/gatsbyjs/gatsby/issues/6383#issuecomment-404173443

[ruslan-mystore]

Same problem here.

[lostwun]

You have to add an additional package, babel-plugin-styled-components. Per their documentation:

npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components

[kakadiadarpan]

@hihellosm @HumidBrains @ruslan-mystore @sheeldotme would it be possible for you to provide a demo project? This makes your issue much easier to diagnose.

[kakadiadarpan]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates.

Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

[kakadiadarpan]

This issue is being closed because there hasn't been any activity for at least 30 days. Feel free to open a new one if you still experience this problem 👍