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