New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS styles do not load after deploying to Surge or Netlify #5100

Open
DanStockham opened this Issue Apr 24, 2018 · 35 comments

Comments

Projects
None yet
@DanStockham
Copy link

DanStockham commented Apr 24, 2018

Description

CSS styles are loading when running 'gatsby develop' however, when deploying to Netlify or Surge, the styles do not load. Here are some of the solutions I tried:

  • setting gatsby-plugin-sass to 1.0.19
  • re-deploying to Netlify with build cache cleared
  • removing the yarn.lock file to force netlify to use npm
  • removing the netlify site altogether and creating a new one.

These solutions don't seem to correct the issue of the styles not loading. Also I tried deploying to surge.sh and I'm still getting no-styles deployment.

I'm pretty befuddled at this point even after looking at similar issues

Steps to reproduce

Netlify

  1. Fork https://github.com/DanStockham/tootles-bar
  2. Add site to Netlify
  3. Deploy site

Surge

  1. Clone https://github.com/DanStockham/tootles-bar
  2. gatsby build
  3. surge public/
  4. Navigate to site

Expected result

image

Actual result

What happened.
image

Environment

  • Gatsby version 1.9.253:
  • gatsby-cli version 1.1.50:
  • Node.js version: v8.9.4
  • Operating System: Windows 10

File contents (if changed):

gatsby-config.js:

require('dotenv').config();

module.exports = {
  siteMetadata: {
    title: `Tootle's Pumpkin Inn`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-glamor`,
    `gatsby-transformer-remark`,
    'gatsby-plugin-sass',
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN
      }
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'src',
        path: `${__dirname}/src/`
      },
    },
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    }],
}

package.json:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "bootstrap": "^4.1.0",
    "dot-env": "0.0.1",
    "gatsby": "^1.9.253",
    "gatsby-image": "^1.0.47",
    "gatsby-link": "^1.6.41",
    "gatsby-paginate": "^1.0.14",
    "gatsby-plugin-glamor": "^1.6.13",
    "gatsby-plugin-react-helmet": "^2.0.11",
    "gatsby-plugin-sass": "1.0.19",
    "gatsby-plugin-typography": "^1.7.18",
    "gatsby-source-contentful": "^1.3.47",
    "gatsby-source-filesystem": "^1.5.32",
    "gatsby-transformer-remark": "^1.7.40",
    "gatsby-transformer-sharp": "^1.6.23",
    "react-fontawesome": "^1.6.1",
    "react-helmet": "^5.2.0",
    "react-transition-group": "^2.3.1",
    "reactstrap": "^5.0.0",
    "typeface-lobster": "0.0.54",
    "typography-theme-kirkham": "^0.16.3"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.12.1"
  }
}

gatsby-node.js:
gatsby-browser.js:
gatsby-ssr.js:

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

KyleAMathews commented Apr 24, 2018

Do your styles get created locally?

@ajayns

This comment has been minimized.

Copy link
Contributor

ajayns commented Apr 24, 2018

@KyleAMathews could this be another case not configuring html.js properly as in #4754 ?

@DanStockham

This comment has been minimized.

Copy link

DanStockham commented Apr 24, 2018

@KyleAMathews I did a gatsby build after re-installing my node modules then I pushed it to Surge. It's working there now. I'm still having issues with Netlify.

@ajayns What am I looking for in html.js? When I followed your link, I did come across this issue but what I am changing? Am I declaring stylesStr to my styles.css? Also, how does this resolve the issue with Netlify? If html.js lives in the cache of the gatsby node module, I'll not be able to access it in Netlify unless there is another way.

@zacaytion

This comment has been minimized.

Copy link

zacaytion commented Apr 24, 2018

Could this be related to #4418?
I commented with a similar issue there, but it might be better suited here.

@DanStockham

This comment has been minimized.

Copy link

DanStockham commented Apr 24, 2018

This morning I read into @ajayns link and got an idea of inserting a link tag with href pointing to my styles.css in the same folder. I inserted it in my index file in the layout folder and pushed it to Netlify. Still no dice

@zacaytion

This comment has been minimized.

Copy link

zacaytion commented Apr 24, 2018

I found a fix for my site.
In my layout/index.js i was importing global styles made using injectGlobal function with emotion.
When I removed the globally injected styles all of the other styles appeared normally.

To fix the issue, I applied the global on my top level styled component.
Not sure how this applies to you @DanStockham, since you're using scss.

@DanStockham

This comment has been minimized.

Copy link

DanStockham commented Apr 24, 2018

@zacaytion
I gave that a shot but still not getting any styles coming up

I did compare my a previous commit before I added my changes and that works in Netlify. Though, I'm having a hard time finding what I did in that previous commit which made it work.

@DanStockham

This comment has been minimized.

Copy link

DanStockham commented Apr 26, 2018

Update
This is definitely a linux issue. I did a gatsby build on my linux machine. The build doesn't have the styles and checking styles.css, my user-defined styles are not there.

I tried every trick and suggestion on this issue. None of them are working. Is there something special on a linux machine I have to do to get this working?

I looked at a previous version I did and it works
There isn't anything different that I can see. Is there any difference that I am not seeing?

Thanks, I'm at my wits end here.

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

KyleAMathews commented Apr 26, 2018

Linux is case sensitive for filenames so probably you're importing a component that's e.g. uppercase and typing it as lower case which works on Mac but won't on Linux.

@DanStockham

This comment has been minimized.

Copy link

DanStockham commented Apr 28, 2018

@KyleAMathews I tried a workaround. Instead having Gatsby doing the sass compling, I ran the sass complier in the command line and imported the complied css in my index layout.

It's working on Netlify. Although, I really want to understand why this is happening on under the hood. I'll start looking the dev version of Gatsby.

@alexwendte

This comment has been minimized.

Copy link

alexwendte commented May 7, 2018

I can confirm after 4 hours of trying to figure out the same problem that it was a capitalization problem that was preventing Netlify from inserting the inline styles. That was a frustrating problem, but I am glad I found this thread! I almost gave up!

@drake-smith

This comment has been minimized.

Copy link

drake-smith commented Jun 30, 2018

@themostcolm What was the capitalization problem you discovered? I am in the same exact situation as all of you and I'm completely stuck and have tried all of the things mentioned in the GitHub issues.

@alexwendte

This comment has been minimized.

Copy link

alexwendte commented Jun 30, 2018

@drake-smith Sure! I use stylus, so in my import statement I had @import '../layouts/Header/header.styl' when my actual file layout was src/layouts/Header/Header.styl. It worked perfectly in development, but did not work on Netlify. Also make sure if you are using git that you have the correct capitalization in your git repository. Sometimes if you change the capitalization of the file, git doesn’t recognize that at all. You can do this with: git mv oldFileName newFileName

@drake-smith

This comment has been minimized.

Copy link

drake-smith commented Jul 2, 2018

@themostcolm Thank you!

@DanStockham Could you walk through what steps you took for your Sass compile workaround? I've discovered the same issue in that my Sass doesn't compile in a Linux environment (Netlify). You're running sass in command line, and removing any webpack Sass commands from gatsby-config?

@deadcoder0904

This comment has been minimized.

Copy link
Contributor

deadcoder0904 commented Jul 12, 2018

I've also found same issue with my site & it isn't loading CSS on first load as you can check. And I'm using Emotion. Any solutions @KyleAMathews

Solutions mentioned here don't work for me sadly :(

@deadcoder0904

This comment has been minimized.

Copy link
Contributor

deadcoder0904 commented Jul 12, 2018

I've got it. I opened up a new issue #6406

@rishichawda

This comment has been minimized.

Copy link

rishichawda commented Aug 20, 2018

@deadcoder0904 did you solve the issue? I'm facing the same problem. On first load it doesn't load all the styles but on visiting some other page via some internal links on the page it applies all the styling. I'm using styled-system and rebass for styling so i don't have any external sass files.

Note: Everything was working fine with Gatsby@1.

Thanks in advance!

@deadcoder0904

This comment has been minimized.

Copy link
Contributor

deadcoder0904 commented Aug 20, 2018

@rishichawda I don't remember what I did to solve it but I think everything must use @next if you're using v2. So I must've used emotion@next & rest all plugins might have been converted to use @next versions.

That might be the solution. Everything is working fine now for me :)

@rishichawda

This comment has been minimized.

Copy link

rishichawda commented Aug 20, 2018

@deadcoder0904 I had updated all the plugins to use @next while migrating to v2 from v1 ( except for a few plugins which for which npm failed to recognize ( or find ) the @next version - gatsby-node-helpers, gatsby-plugin-stripe-elements and shopify-source.) Rest all are using @next.

@deadcoder0904

This comment has been minimized.

Copy link
Contributor

deadcoder0904 commented Aug 20, 2018

I checked those 3 you mentioned & it looks good so I think you are definitely missing something. Can't help it unless there is something specific.

I remember now that my error was I wasn't using v2 of emotion gatsby plugin & I think I had to clear Netlify cache since I was using https://github.com/axe312ger/gatsby-plugin-netlify-cache which uses previous cache to speed up deployment. So those 2 were my problems.

I think you will find answer if there is something relevant you can post or else you checkout example sites made using rebase & styled-system. I did it that way. Sorry I don't have a solution for you :(

@rishichawda

This comment has been minimized.

Copy link

rishichawda commented Aug 20, 2018

No problem! Thanks for sharing. I'm waiting for the issue to be fixed ( hopefully ) in future updates of gatsbyv2.

@kakadiadarpan

This comment has been minimized.

Copy link
Contributor

kakadiadarpan commented Sep 25, 2018

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 👍

@osogrizz

This comment has been minimized.

Copy link

osogrizz commented Sep 26, 2018

I just ran into this today. I built the site with Gatsby v2 but my css is not being applied on initial load. I've looked at the solutions linked here but no luck so far. I'm using emotion. I have another site that I updated from Gatsby v1 and that site is using styled components without any issues?

@maxmatthews

This comment has been minimized.

Copy link

maxmatthews commented Sep 26, 2018

Having the same issue. My git repo is here: https://bitbucket.org/maxmatthews/codecommunity and my site is https://codecommunity.io
Attempting to use the Stellar starter theme which I upgraded to use Gatsby v2. On mac with gatsby develop, the site loads fine (note the white text):
screen shot 2018-09-26 at 3 49 51 pm

But as soon as I run gatsby build or deploy to netlify it looks like this:
screen shot 2018-09-26 at 3 50 41 pm

The interesting thing is if you go to any other page like https://codecommunity.io/thanks and then click on a link to the homepage, it renders the CSS fine. Have to be missing something here...

@iljapanic

This comment has been minimized.

Copy link

iljapanic commented Sep 27, 2018

I have the same problem as @maxmatthews. I found several issues related to this with no definitive fix.

@kakadiadarpan kakadiadarpan added type: bug and removed stale? labels Sep 28, 2018

@liamdanielduffy

This comment has been minimized.

Copy link

liamdanielduffy commented Oct 7, 2018

@rishichawda @osogrizz

I'm also using styled components. This was fixed for me as soon as I added the Gatsby styled-components plugin to my build, using the steps outlined here:

https://www.gatsbyjs.org/docs/styled-components/

Before fixing this, my styles wouldn't load on my first page load, until I navigated to another route. Now everything loads the first time.

@osogrizz

This comment has been minimized.

Copy link

osogrizz commented Oct 9, 2018

@liamdanielduffy @rishichawda

After reading everything I could find, contacting Netlify, and struggling with removing service workers per their advice, I decide to start over and slowly rebuilt my site to see what it could possibly be.

I did install the plugins correctly so i was good on that end. My confusion is primarily that styling was applied correctly in development but in production could only be (inconsistently) forced to apply by redirecting manually to another page. After rebuilding the site there are slight differences with how I used the layout component making direct comparison impossible. One other difference is that I went with styled-components vs emotion. Everything works as expected now.

I have since begun adding media queries and did notice that if I used more complex queries I had similar behavior but with no way to force the actual styles to be applied. Enough to get me thinking this is related but not the same issue. After cleaning up my queries, there are no issues.

@justinformentin

This comment has been minimized.

Copy link
Contributor

justinformentin commented Oct 31, 2018

I wanted to chime in to say that I'm having the exact same issue. Using Gatsby v2, using Emotion. All is good in dev, but once built there are no styles being displayed unless following an internal link. Working on trying to fix it now.

Update: Just switched entire project over to styled-components. Didn't do anything. Then I tried going back to the dev server, and I was getting the same issue. So I went back to a known good version of the repo (with Emotion) and tried the dev server and it worked. So I tried building it and it worked.

So I don't know exactly what I did wrong but I clearly messed something up. Between the known good version and the no-style version, I added proptypes and I might have changed a few little things here and there, but not enough that it would ruin it in the way that it did. So I'm really not sure what the issue was. Maybe I'll go back over when I've slept and it'll be obvious.

@gzhihao

This comment has been minimized.

Copy link

gzhihao commented Nov 15, 2018

@justinformentin Did you try adding 'gatsby-plugin-emotion' to your gatsby-config.js? I had exactly the same issue like you (not emotion, but styled-component), after I added 'gatsby-plugin-styled-components' (according to @liamdanielduffy's comment) in the plugins config, the production build worked as normal.

If this is a common issue, it might worth adding warning message in dev mode.

@jontewks

This comment has been minimized.

Copy link

jontewks commented Nov 15, 2018

We are running into a similar issue but what we were seeing was only a single component was not having the styles applied to it until navigating to another page and back. We are using all the very latest packages and plugins. We are currently using glamorous and gatsby-plugin-glamor.

I was doing some troubleshooting and found that if I moved the component experiencing the issue further up in the tree of its parent, more components were being affected by missing styles.

I ended up finding a fix for the issue we were experiencing. The component which wasn't getting the styles applied to it right away has a componentWillMount lifecycle method which would set state based on some logic. Simply changing it to componentDidMount instead removed the issue entirely. I recall that usually you'd try to avoid calling setState inside of componentDidMount since it will run the render method twice, but that seems to be what fixed this issue for us. I'm not sure if this is at all related to the above issues but figured I'd throw it out there as yet another thing to try if anyone else is experiencing this or perhaps it will help lead to the final trackdown of whats going on.

Additional Info:
I continued to troubleshoot and found another way to solve the issue that hopefully will shed some light on the underlying cause.

The component having the issue has a default state of { showBanner: false } and in the componentWillMount will sometimes set showBanner in state to true. In the render method the first line is

if (!this.state.showBanner) { 
  return null 
}

I tried changing the return null to return <div /> with no change. I also tried always returning the same <div> but instead of setting display: flex on the <div> always I changed it to display: ${this.state.showBanner ? 'flex' : 'none'}. Interesting thing about that change was that the issue was still present but the styling of the broken component was different, it was closer to what it should have been but still messed up. I found that always returning the same <div> with the same css applied but instead when state.showBanner was false I just didn't put any content into the <div> and when true filled the <div> with the normal content like so:

return (
  <div className={...>
    {this.state.showBanner ? <BannerContent /> : null}
  </div>
)

This seems to have fixed the issue as well and doesn't require us to setState in componentDidMount, but I don't see a big deal either way in our particular case.

Good luck everyone!

@justinformentin

This comment has been minimized.

Copy link
Contributor

justinformentin commented Nov 20, 2018

@gzhihao Yes, I made sure I was following all of the config rules and I tried both emotion and styled-components. Never ended up figuring it out because I thankfully had a working backup which I switched to for time saving's sake.

@gzhihao

This comment has been minimized.

Copy link

gzhihao commented Nov 30, 2018

I encounter similar issue lately again. The styling issue only happen in production build when I accessed the page directly from the url. If I navigate from other page, it's just fine.
It turned out I forgot to import one of the css file in that page, while other pages have that import.

@lbittner-pdftron

This comment has been minimized.

Copy link

lbittner-pdftron commented Nov 30, 2018

I had the same issue as well and eventually found I had the same problem as @gzhihao. I was using CSS classes that weren't imported on that particular page.

@bjankord

This comment has been minimized.

Copy link

bjankord commented Dec 30, 2018

I just ran into a similar problem as @gzhihao mentioned. In production, if I navigated to a specific page, it would only load CSS I had required in gatsby-browsers.js, but would fail to load CSS I had imported in src/pages/index.js. However, it would work if I started on the homepage, and navigated to said page. The site is hosted on netlify.

I'm testing moving my main styles.css I imported in src/pages/index.js to gatsby-browsers.js to see if that resolves it.

Edit: This seemed to resolve the issue for me.

@jwilliamhall

This comment has been minimized.

Copy link

jwilliamhall commented Jan 9, 2019

I also had the same issue running Styled Components on Netlify. Installing gatsby-plugin-styled-components and adding it to my config file did the trick.

Note: I had to clear my browser cache to see the changes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment