Missing resources for /

[Jivings]

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!

[Undistraction]

Might be related to #11453

[Jivings]

Maybe, though there's no 404 stuff involved here.

[sidharthachatterjee]

Sorry you're seeing this, @Jivings

Could you please link to a minimal reproduction if possible?

[Jivings]

I haven't been able to reproduce locally 🙁 Is there any more information I can get you, or does the sentry report help at all? Under what circumstances might this occur so that I may be able to narrow it down?

[EricSSartorius]

I am also seeing this but only after deploying, I can't reproduce locally.

Uncaught Error: Missing resources for /store/
    at t.n.render (ensure-resources.js:135)
    at Xo (react-dom.production.min.js:156)
    at Qo (react-dom.production.min.js:155)
    at ti (react-dom.production.min.js:162)
    at Oi (react-dom.production.min.js:192)
    at ji (react-dom.production.min.js:193)
    at fa (react-dom.production.min.js:205)
    at sa (react-dom.production.min.js:204)
    at Mi (react-dom.production.min.js:200)
    at ya (react-dom.production.min.js:218)

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.

[italodr]

I am having the same issue here... first, sorry for my english, i'm spanish-speaker ¯_(ツ)_/¯

Error: Missing resources for /...
    at t.n.render (ensure-resources.js:135)
    at Ri (react-dom.production.min.js:169)
    at Ci (react-dom.production.min.js:168)
    at Li (react-dom.production.min.js:176)
    at Ba (react-dom.production.min.js:221)
    at Ha (react-dom.production.min.js:222)
    at Pl (react-dom.production.min.js:238)
    at Tl (react-dom.production.min.js:237)
    at wl (react-dom.production.min.js:234)
    at Qa (react-dom.production.min.js:232)

First of all, a little of context, I had an issue related to a carousel package Tiny Slider which was using window, so I search for different carousels with SSR implemented and I found react-responsive-carousel. I works great with what I needed, but only in develop.

The mentioned error happens in two related scenarios:

Scenario 1
I use styled-components to style my slide, but adding mixins broke my builds. I found that adding gatsby-plugin-styled-components solved the issue; and it works, but... scenario 2 happend

Scenario 2
Now my build is working and I can see my page with styles. But, my carousel does not work, it does nothing!!! 😱... The styles are looking great though... 😅
So I just remove the gatsby-plugin-styled-components and the script worked again, but not my styles 🙃

Hope this gives some hints to find and solve the issue

[dackers86]

Hi Guys.

Not sure if this helps but I had a similar issue, it turns out my missing resource was a missing (production) env variable for firebase. This in turn seemed to effect my images - this must have had an impact on a build step

Can provide more information if required...

[pieh]

@Jivings can you update gatsby and gatsby-plugin-offline package? this happens when you make new build but resources from previous are no longer available (so html cached by offline plugin tries to use not available resources). In newer gatsby/offline packages versions we added reload after service worker updates to not leave site in unusable state

[efd1]

In my case, I changed an import from import { Link } from './' to import { 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.

[marcysutton]

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:

[Undistraction]

@marcysutton Have you made any headway with this? I'm seeing the same thing in IE11 only. No issues in any other browsers.

[marcysutton]

Not yet! @sidharthachatterjee or @pieh, is this enough information to debug? Pretty blocking issue in IE11 at the moment.

[marcysutton]

@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/?=compile

Here'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!