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

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"
  }
}

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 20 (9 by maintainers)

Most upvoted comments

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.

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

cc @rishichawda - please see above comments

Awesome! Glad you found the issue

@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.

@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?

@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.