Gatsby: CSS does not load on direct visit of a page

[ValidRobot]

Description

If I visit then a page say localhost:9000/imprint directly the CSS does not load but if I use an internal link it does load without problems. I experience this problem with every page.

Steps to reproduce

Tried to recreate it but a clean install of my stack did not have any similar problems. So I am bit stuck because I can't upload the current build. I hope that maybe someone has experienced the same strange bug and can help me.

Expected result

CSS should also be loaded on the direct visit of the page.

Environment

System:
    OS: Linux 4.16 Fedora 26 (Workstation Edition) 26 (Workstation Edition)
    CPU: x64 Intel(R) Core(TM) i5-4210U CPU @ 1.70GHz
    Shell: 5.3.1 - /usr/bin/zsh
  Binaries:
    Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
    Yarn: 1.9.2 - /usr/bin/yarn
    npm: 5.6.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
  Browsers:
    Chrome: 68.0.3440.84
    Firefox: 60.0
  npmPackages:
    gatsby: next => 2.0.0-beta.9 
    gatsby-plugin-eslint: ^1.0.3 => 1.0.3 
    gatsby-plugin-typography: ^1.7.19 => 1.7.19 
    gatsby-source-filesystem: ^1.5.39 => 1.5.39 
  npmGlobalPackages:
    gatsby-cli: 1.1.58

File contents (if changed)

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `Starter Page!`
  },
  plugins: [
    {
      resolve: "gatsby-plugin-eslint",
      options: {
        test: /\.js$|\.jsx$/,
        exclude: /(node_modules|cache|public)/,
        options: {
          emitWarning: true,
          failOnError: false
        }
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `videos`,
        path: `${__dirname}/src/data/videos/`
      }
    }
  ]
};

package.json:

{
  "name": "gatsby-starter-hello-world",
  "description": "Gatsby hello world starter",
  "license": "MIT",
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "lint:js": "eslint \"**/*.{js,jsx}\"",
    "watch": "esw --watch",
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,json,css,md}": [
      "prettier --write",
      "git add"
    ]
  },
  "dependencies": {
    "compass-vertical-rhythm": "^1.4.5",
    "gatsby": "next",
    "gatsby-plugin-typography": "^1.7.19",
    "gatsby-source-filesystem": "^1.5.39",
    "gray-percentage": "^2.0.0",
    "prop-types": "^15.6.2",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "styled-components": "^3.3.3",
    "typeface-open-sans": "^0.0.54",
    "typography": "^0.16.17",
    "typography-breakpoint-constants": "^0.15.10"
  },
  "devDependencies": {
    "docz": "^0.2.11",
    "eslint": "5.0.1",
    "eslint-config-airbnb": "17.0.0",
    "eslint-config-prettier": "2.9.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-import": "2.13.0",
    "eslint-plugin-jsx-a11y": "6.0.3",
    "eslint-plugin-prettier": "2.6.1",
    "eslint-plugin-react": "7.10.0",
    "gatsby-plugin-eslint": "^1.0.3",
    "husky": "^0.14.3",
    "lint-staged": "^7.2.0",
    "prettier": "1.13.6"
  }
}

[davidbailey00]

I encountered one or two similar-sounding bugs working on #7355 - could you upload your local build folder to netlify so I can check it out? If you go to https://app.netlify.com/ and scroll down after signing in, you should see this box where you can upload a static folder:

[rishichawda]

Did anyone find a fix for this? I'm using styled-system and rebass components in my project ( No external CSS files ) and have a similar issue. On direct visit of a page the styles aren't loaded properly but through any internal link in the web app, it loads perfectly.

I'm not sure if it's an issue with Gatsby@2 but in Gatsby@1 it was working correctly! Any suggestions?
Thanks in advance!

[davidbailey00]

@rishichawda As mentioned in my last comment I think this might be fixed in my PR #7355 - please could you clone my repo (checkout the fix-offline-issues branch) use gatsby-dev-cli with your project, and let me know if this fixes the problem? Or if your code is public, I'll be happy to have a look myself!

[rishichawda]

@davidbailey00 Is this issue going to be solved in future update of Gatsby@2 by any chance?

[ankushranka]

Had the same issue and i can reproduce it every time. Happens on locally serving the build. Interestingly, i deployed it remotely and don't see it happening.

[rishichawda]

@ankushranka Exactly the opposite with me. On development server it works fine but on deploying it to remote it breaks!

[ankushranka]

Works for me on 'gatsby develop' and on hosting it remotely. Doesn't work on serving a build locally using 'gatsby build; serve -s public'

Very strange behaviour though. I doubted my usage of styled-components and semantic-ui-react together. That didn't turn out to be the issue.

[davidbailey00]

@davidbailey00 Is this issue going to be solved in future update of Gatsby@2 by any chance?
And I'm sorry but it's a private repo of our organisation.

@rishichawda It's likely to be fixed eventually, but only if the issue can be reproduced; also, I might not be the best person to ask since I'm only a contributor. I understand it might be a private repo, but in that case you'll need to make a new repo which at least demonstrates the problem.

[rishichawda]

@davidbailey00 Any update on the #7355 PR you raised which solves this issue or when it will be merged?

Update : I'll try to create a repo to demonstrate the issue if possible and share the link here if I do.

[davidbailey00]

@rishichawda I believe @KyleAMathews is going to test it out some time this week, so it'll probably be published to yarn/npm within the next few weeks. Until I test your demonstration repo I'm not 100% sure this will fix your issues - I only learned React and Gatsby last week 😄

[davidbailey00]

@rishichawda Are you sure your problem isn't caused by your own code? I just encountered the problem as you described (it works in development but not production) but then realised I had forgotten to import the styles from every page, and had only done so from the index page. Can you just check if that's the problem?

[rishichawda]

@davidbailey00 There are no external styles in my project. All of it is through custom styled components using styled-system and reusable components from rebass.

I saw that your PR got merged to the master and a new version was released so this should be solved now ( i guess )?

[davidbailey00]

@rishichawda As I've said before I'm not 100% sure if my PR fixes the problem - can you tell me if this is the case now that the update's published? If it's still not fixed, have you got a demonstration repo up yet? If so I can test it out and see if I can figure out the problem.

[rishichawda]

@davidbailey00 Hi. Sadly, the problem persists. Direct visit of page adds no-cache to end of the url and keeps refreshing the page. Checked on latest release.
I'm sorry I couldn't work on the demonstration for the problem. Will share the repo as soon as I start working on that.

[davidbailey00]

@rishichawda Thanks for the update, and sorry about that - sounds like there are still some issues after the PR. I'll try to work on fixing this once the repo is ready, thanks!

[ValidRobot]

Took me a while but found a solution to the problem. On the stack I was working it was forgotten to add the gatsby-plugin-styled-components plugin to the gatsby-config.js. I hope I could help someone else to save some time.

[davidbailey00]

Awesome! Glad you found the issue

[davidbailey00]

cc @rishichawda - please see above comments

[rishichawda]

Installed gatsby-plugin-styled-components and it solves the issue! Thanks @ValidRobot for sharing!

[EmmaB]

This was the issue for me: https://github.com/gatsbyjs/gatsby/issues/9121#issuecomment-431458945