Skip to content
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

Caching with layout.css and <Layout>? #14163

Closed
montylounge opened this issue May 19, 2019 · 11 comments

Comments

Projects
None yet
4 participants
@montylounge
Copy link

commented May 19, 2019

Description

I'm seeing layout.css referenced after starting a new site with gatsby when using gatsby develop but I'm not referencing this stylesheet in my project.

Steps to reproduce

gatsby new test-site
cd test-site
gatsby develop

Screenshot

Then, stop dev server.

Replace ./pages/index.js with the below...

import React from "react"

const IndexPage = () => (
<>
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
</>
)

export default IndexPage

Then run the dev server > gatsby develop

View site in browser.

Screenshot

Note the H1 is using the -apple-system font-family but no page styles have been provided.

Open up the developer tools to check things out...

Screenshot

Not sure why the reference to layout.css style exists. With the update to index.js I removed the component which is the source of the reference to import "./layout.css"

I thought, maybe caching, so I opened up incognito and no luck.

Then I tried up Safari (was using Chrome prior)... but the same result.

Next, stop dev server and then...

gatsby clean
gatsby develop

Viewed the site again, but the issue still exists.

Next, stop dev server.

Let's try something else... let's build the static site and view the results versus using gatsby develop.

gatsby build
gatsby serve

Screenshot

With the build command the result is as expected.

Expected result

My assumption is when I remove the component from the index.js file that the result would remove the reference to layout.css which it does do correctly in gatsby build but just no gatsby develop

Actual result

It appears layout.css is cached.

Environment

System:
OS: macOS 10.14.3
CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.10.0 - ~/.nvm/versions/node/v11.10.0/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.7.0 - ~/.nvm/versions/node/v11.10.0/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 74.0.3729.157
Safari: 12.0.3
npmPackages:
gatsby: ^2.5.5 => 2.5.5
gatsby-image: ^2.1.0 => 2.1.0
gatsby-plugin-manifest: ^2.1.1 => 2.1.1
gatsby-plugin-offline: ^2.1.1 => 2.1.1
gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
gatsby-plugin-sharp: ^2.0.37 => 2.0.37
gatsby-source-filesystem: ^2.0.36 => 2.0.36
gatsby-transformer-sharp: ^2.1.19 => 2.1.19
npmGlobalPackages:
gatsby-cli: 2.5.15

@wardpeet

This comment has been minimized.

Copy link
Member

commented May 20, 2019

what happens if you remove node_modules/.cache as this could be a babel cache issue. If it's the case we can look into this further.

@montylounge

This comment has been minimized.

Copy link
Author

commented May 20, 2019

Issue still exists @wardpeet after rm -rf node_modules/.cache and then running gatsby develop to view the site again. Figured I'd share in case anyone else is running into the same issue. Thank you.

@wardpeet

This comment has been minimized.

Copy link
Member

commented May 21, 2019

so removing node_modules/.cache is a quickfix?

@montylounge

This comment has been minimized.

Copy link
Author

commented May 21, 2019

No, the issue still exists.

@TarjeiB

This comment has been minimized.

Copy link

commented May 26, 2019

I have the same issue on chrome and cant get rid of the old styles. Tried clearing all caches etc.
On firefox i do not have the same problem.

@montylounge

This comment has been minimized.

Copy link
Author

commented May 26, 2019

Let me run my manual tests again on Firefox and Safari as well to confirm the behavior.

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented May 26, 2019

The file is imported in layout.js which is also used in the second page. Try deleting the second-page.js and layout.js?

@montylounge

This comment has been minimized.

Copy link
Author

commented May 28, 2019

I'll try that next @KyleAMathews and get back to you - thank you.

@montylounge

This comment has been minimized.

Copy link
Author

commented Jun 1, 2019

If I remove the "Layout" component from all page JS files (404, index, page-2) then the issue is resolved. Not sure if this should stay open or not but I created the ticket as I thought someone else may run into this and wanted to share. This isn't a roadblock for me, but possibly a confusion for someone getting started with gatsby?

@gatsbot

This comment has been minimized.

Copy link

commented Jun 25, 2019

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

@gatsbot gatsbot bot added the stale? label Jun 25, 2019

@gatsbot

This comment has been minimized.

Copy link

commented Jul 6, 2019

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

@gatsbot gatsbot bot closed this Jul 6, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.