gatsby: Missing resources for /
Summary
Periodically on my production site I’m seeing the following error;
Error: Missing resources for /
at render(./.cache/ensure-resources.js:133:17)
at Sg(./node_modules/react-dom/cjs/react-dom.production.min.js:169:129)
at Hh(./node_modules/react-dom/cjs/react-dom.production.min.js:214:16)
at Ih(./node_modules/react-dom/cjs/react-dom.production.min.js:215:274)
at ji(./node_modules/react-dom/cjs/react-dom.production.min.js:230:233)
at ki(./node_modules/react-dom/cjs/react-dom.production.min.js:229:143)
at Fh(./node_modules/react-dom/cjs/react-dom.production.min.js:226:196)
at bg(./node_modules/react-dom/cjs/react-dom.production.min.js:224:28)
at qi(./node_modules/react-dom/cjs/react-dom.production.min.js:243:14)
at render(./node_modules/react-dom/cjs/react-dom.production.min.js:251:109)
at oi(./node_modules/react-dom/cjs/react-dom.production.min.js:254:364)
at Ai(./node_modules/react-dom/cjs/react-dom.production.min.js:254:350)
at apply(./.cache/production-app.js:114:7)
at r(./node_modules/@sentry/browser/dist/index.js:3114:1)
It seems like sometimes this causes the site to not render at all and just show a blank page.
Relevant information
You can see the trace on Sentry here
Environment (if relevant)
This is the env on which the site is built;
System:
OS: macOS High Sierra 10.13.2
CPU: x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.11.1 - ~/.nvm/versions/node/v8.11.1/bin/node
Yarn: 1.9.4 - ~/.nvm/versions/node/v8.11.1/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v8.11.1/bin/npm
Browsers:
Chrome: 71.0.3578.98
Safari: 11.0.2
npmPackages:
gatsby: ^2.0.19 => 2.0.72
gatsby-image: ^2.0.15 => 2.0.20
gatsby-plugin-create-client-paths: ^2.0.2 => 2.0.2
gatsby-plugin-google-gtag: ^1.0.8 => 1.0.8
gatsby-plugin-manifest: ^2.0.5 => 2.0.10
gatsby-plugin-offline: ^2.0.11 => 2.0.17
gatsby-plugin-page-transitions: ^1.0.7 => 1.0.7
gatsby-plugin-react-helmet: ^3.0.0 => 3.0.2
gatsby-plugin-sharp: ^2.0.18 => 2.0.18
gatsby-plugin-stripe-elements: ^1.0.9 => 1.0.9
gatsby-plugin-twitter: ^2.0.8 => 2.0.8
gatsby-source-filesystem: ^2.0.4 => 2.0.12
gatsby-transformer-sharp: ^2.1.12 => 2.1.12
npmGlobalPackages:
gatsby-cli: 2.0.0-rc.1
gatsby-plugin-countly: 0.2.0
No idea where to start with debugging this so any help is appreciated!
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 29
- Comments: 112 (70 by maintainers)
Commits related to this issue
- Update gatsby and gatsby-plugin-offline Trying to fix this: https://github.com/gatsbyjs/gatsby/issues/11524 (mobile only!) — committed to explosion/spaCy by ines 5 years ago
@wardpeet is working on some tests to simulate network problems but we should have this out in the next 24 hours.
We’ve deployed the PR to gatsbyjs.org for the last ~4-5 days and things are looking really good! There’s been no new “missing resources” events since the deploy.
https://github.com/gatsbyjs/gatsby/pull/14889#issuecomment-505872897
@gatsbyjs-read-only-user Not stale 😬
We should have this one fixed in the latest gatsby release
gatsby@2.11.1. We have ran it on gatsbyjs.org and the errors dissapeared for us.I’m getting these errors but only in IE11. I’m not sure exactly which resources are failing since it’s only occurring in one browser, as far as I can tell, but I do see some errors in react-dom (see screenshots below). I updated all of my Gatsby dependencies to their latest versions and added a polyfill in case it was choking on Symbol or something too modern, yet the errors still occur. I also have image loading problems in IE11, too, I believe like what is discussed in #4021. If I remove all images and the offline plugin, I get no errors on page load but I do when I navigate to any other pages, even if they don’t contain images. It looks like some JS fails to load and IE presents probably the HTML 404 page instead. So there’s definitely something wonky going on here.
I’m working off of my develop branch deployed to Netlify to test out fixes on various devices. Here’s the latest debug build if you want to test it: https://5c6ee3b943e6c400080a5a8b--marcysutton.netlify.com/about/ Here’s my live site, which definitely has all of the brokenness in IE11 still: https://marcysutton.com And here’s my site source: https://github.com/marcysutton/gatsby-site
Here are some screenshots from my VM:
Would like to add that this problem persists for us across all browsers and version, it’s not just IE, and seems to be triggered by using a Service Worker in Gatsby. Related: #12399
@KyleAMathews Honestly, I think this happens on every Gatsby site deployed to Netlify that is multiple pages. Throw Sentry up on one and see for yourself.
Please upgrade and let us know if there’s any more trouble! Closing this for now.
For people who see this error occasionally — that’s to be expected actually — whenever you deploy a new version of your site, most hosts delete older versions of the site which means that anyone already on the site that tries to navigate to a page won’t be able to find the resources for this page so will throw this error and then trigger a full refresh by grabbing the HTML anew for the page.
You can see the tests for this here: https://github.com/gatsbyjs/gatsby/blob/cbbed1dde8a4fd25080e9ab65d7661dfa8fbf327/e2e-tests/production-runtime/cypress/integration/resource-loading-resilience.js#L57
@jackhair I can confirm the bug. Could you make a new issue with the info provided above?
We are seeing it and we don’t use the offline plugin.
@coreyward Maybe this is helpful:
(from https://github.com/gatsbyjs/gatsby/issues/12399#issuecomment-480082161)
@davidbailey00 yeah we think the main fix is correctly handling some unusual error cases for ajax requests & adding retry logic https://github.com/gatsbyjs/gatsby/pull/14889
Interesting. For what it’s worth, we have never been able to replicate the issue locally (gatsby develop), only when it’s built on a production environment do we see the issue.
We have a prod branch on 2.9.2 that looks promising, so far no issues, but the traffic to it is miniscule compared to main production. I’ll post results once we’ve deployed, hoping the page manifest update to Gatsby last week helps a lot.
We first saw this happen when upgrading to Gatsby v2.9.4. Reverting to 2.8.5 resolved the issue. Still trying to analyze the cause.
I doubt our particular situation will be helpful for many other folks, but I wanted to share it here just in case.
This was affecting DataCamp.com due to a CORS issue. We are using asset-prefixing and hosting assets on S3, served via Cloudfront. During our first deploy with asset-prefixing, we forgot to set CORS headers in S3 to allow access to the assets from our domain (oops). We updated our CORS headers after a minute or two, but any edge nodes where the assets were already called apparently cached not just the asset content but also the CORS headers! This created the illusion that some weird bug was affecting only a small percentage of users, when in reality the issue was that a small percentage of edge nodes had the old headers cached. We solved this issue by creating an invalidation in Cloudfront for all of the assets.
More generally: if any of your users have an adblocker that is picking up a particular asset name as potentially being advertising or tracking related, if at any point between your asset server and the end user there’s a middleman that might be modifying headers for a small percentage of your users (e.g. a corporate network that filters content), or if any other weird network thing might be happening, it seems like all of these could contribute to this error.
@KyleAMathews Hey I just ran into this error on the production GatsbyJS website. After refreshing a couple times the issue went away.
@antoinerousseau Yeah, after a few attempts at trying to fix it we still get it even without the SW. We did upgrade a few Gatsby plugins to recent versions and it reduced the count of errors, but not to 0. (Could well be coincidence though)
@KyleAMathews Have you been seeing this, or have any info?
I am getting this error in IE (edge mode).
It is pointing to the file
react-dom.production.min.jsin line 1 char 195183.when clicking on the error in IE it points to this code:
Same issue here, seeing this periodically on websites I haven’t visited for a few days (the Gatsby website as well). Not on IE11 but Chrome. After a few seconds of blank page, there’s a refresh after which everything is working again.
Versions of one example:
gatsby:2.0.118gatsby-plugin-offline:2.0.23@Undistraction I have some good news: the team helped me debug this issue, and they pointed out that IE11 is having trouble with uncompiled arrow functions in a plugin (
gatsby-background-image). They’re discussing changes to Gatsby core to account for this, but in the meantime you should be able to get around it by compiling any plugins that are causing issues: https://www.gatsbyjs.org/packages/gatsby-plugin-compile-es6-packages/?=compileHere’s where I used it on my site: https://github.com/marcysutton/gatsby-site/blob/develop/gatsby-config.js#L107
Let us know if you still have any trouble!
I am also seeing this but only after deploying, I can’t reproduce locally.
I have noticed though that I only get this error on a branch where I tried to removed ThemeProvider (styled-components) from my code and I am guessing somewhere things got messed up in the file structure since no packages were added/updated/removed. Will update if I pinpoint the cause but there isn’t much to go by.
We won’t get Missing Resources because it was deleted and replaced with a different error: https://github.com/gatsbyjs/gatsby/pull/14889/files#diff-3182dbe2979ea0744c50242668edc572L173
We recently deployed this fix, going to check out bug logs for new/different errors.
EDIT: yeah looks like
this.loadPageDataJson(...).then(...).finally is not a functionis the newmissing resourcesThe version rollback down to
2.8.5from2.9.4seems to have fixed the issue for us. In our case it seems to be related to some missingpages-manifest-{hash}.js[.map]files. The2.9.3and2.9.4version have some potential breaking changes: see https://github.com/gatsbyjs/gatsby/pull/14732 (from Gatsby package changelogs: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/CHANGELOG.md). For confirming this a last test for us should be to upgrade Gatsby up to2.9.2.@bigfanjs could you go into a little more detail there?
@coreyward We use Bugsnag and have seen it around 4.8k times in the last month.
I’ve outlined the only fix that works in all cases in a related issue here: https://github.com/gatsbyjs/gatsby/issues/12399#issuecomment-488247566
@abumalick @antoinerousseau We move
gatsby-plugin-netlifyto the end of our plugin array, and it didn’t change anything.Ok but what I mean is that the bug happens even without that plugin.
I’m having this error and I’m not using a service worker. I was thinking that maybe it happens if the page loads with a certain version of the site, and then a deploy is done and the asset names change so they can’t be found by the opened version? Besides, the version causing the Error in Sentry is not the version that was live at the moment of the Error.
I have also faced the same issue.
gatsby-plugin-remove-serviceworkerthis issue goes away Resolution Used:gatsby-plugin-remove-trailing-slashesin combination with PWA plugingatsby-plugin-offlineand this seems to resolve the issue for me.In my case, I changed an import from
import { Link } from './'toimport { Link } from './Link'(in my file/components/footer.js), and it did fix the error “Missing resources for /”. It was a circular dependency I guess. But I don’t know if it will fix yours Edit: If the error happens periodically, I think the solution from @pieh above have better chances to fix it.@wardpeet @jackhair I managed to track down our issue with the finally polyfill.
We found one of our dependencies was including babel-polyfill with useBuiltins: usage instead of entry.
Either way we had to downgrade redux-api-middleware (not related to gatbsy). https://github.com/agraboso/redux-api-middleware/compare/v2.3.0...v3.0.0
this solved our
finallybug. I would recommend following the stack trace up the chain and see which lib is the culprit as the Promise polyfill might be getting overridden but a nasty lib.@KyleAMathews I’m having this issue still occurring on my site. locally it works fine and in prod it doesn’t. Also, I’m seeing it 100% of the time, not sporadically like some of the comments above. That said, I’ve looked through most of the solutions and utilizing them hasn’t resulted in a fix. Do you have a specific version of Gatsby that has the fix in it so I can ensure that I’m hitting something different?
I’m willing to share URL privately as well as add contrib access to the private repo if someone from the gatsby team wants to take a look (DM me on twitter). Thanks for any tips/suggestions - to be clear the things I’ve tested are:
.FYI @moocar has a PR up to make resource loading more robust e.g. retry failed or partially loaded resources https://github.com/gatsbyjs/gatsby/pull/14889
If any of you have time to review / try that, it’d be much appreciated. I apologize for not catching this earlier — it wasn’t clear how widespread this was or what the cause was before digging in recently with @Moocar
We’ve definitely been seeing for a long while before 2.8.5. I think this issue has a wide variety of causes. v2.94 just seems to have introduced yet another.
@bmatzner @wilcoxmd We’ve been on 2.8.x for a while, and have been having Missing Resources in every Gatsby upgrade since we first moved from v1 to v2. Consistently, no spike or change when upgrading since v2.
@KyleAMathews It appears the refresh is not being triggered by this missing resources error, so a user is stuck on a broken or just white page. Do we need to have the offline plugin to ensure the refresh happens?
We use Bugsnag and are seeing this show up for about 1% of traffic. Browsers seem to roughly match our overall traffic distribution—not seeing any clear patterns there.
@coreyward Also seeing it intermittently with Raygun. It’s only on one specific page and effects Mobile Safari and Chrome only.
The suggestions above doesn’t seem to work for me. I’m only seeing this for iOS users and only sporadically. I can’t seem to replicate it and thus it’s hard to figure out what might be wrong. Any tips on how to figure out what the underlying problem might be?
Workaround: https://github.com/gatsbyjs/gatsby/issues/13410#issuecomment-486306784
@jackhair it’s hard to tell what’s happening without a reproduction. http://gatsby.dev/reproduction
@onetwothreebutter open the compiled JavaScript file(s) in the browser and search for
=>. IE didn’t make it easy to tell where they were coming from, so I just searched manually with “Ctrl + F”This should improve in core over time but that’s how you can check in the meantime!
FWIW I wrote up my experience with this issue in https://github.com/gatsbyjs/gatsby/issues/12399 It might be of help to anyone hitting the
Missing resources for /error.