Gatsby - Cannot read property 'component---src-pages-index-jsx' of undefined

Question

I am trying to migrate my existing ReactJS app with WordPress backend to GatsbyJS. I am new to GatsbyJS and followed the instructions on their page for the setup on a Windows 10 machine. The setup ran pretty well and I could start my migration process, but after some time I only got the following error when trying to load the page:

TypeError: Cannot read property 'component---src-pages-index-jsx' of undefined

fetchResource
D:/GitHub/gatsby-starter-wordpress/.cache/loader.js:77
  74 | // Find resource
  75 | let resourceFunction
  76 | if (resourceName.slice(0, 12) === `component---`) {
> 77 |   resourceFunction = asyncRequires.components[resourceName]
  78 | } else if (resourceName.slice(0, 9) === `layout---`) {
  79 |   resourceFunction = asyncRequires.layouts[resourceName]
  80 | } else {
View compiled
getResourceModule
D:/GitHub/gatsby-starter-wordpress/.cache/loader.js:112
  109 |     cb(failedResources[resourceName])
  110 |   })
  111 | } else {
> 112 |   fetchResource(resourceName, (err, executeChunk) => {
  113 |     if (err) {
  114 |       cb(err)
  115 |     } else {
View compiled
getResourcesForPathname
D:/GitHub/gatsby-starter-wordpress/.cache/loader.js:358
  355 |     })
  356 |   }
  357 | }
> 358 | getResourceModule(page.componentChunkName, (err, c) => {
  359 |   if (err) {
  360 |     handleResourceLoadError(
  361 |       page.path,
View compiled
new ComponentRenderer
D:/GitHub/gatsby-starter-wordpress/.cache/component-renderer.js:26
  23 | 
  24 |   this.state = {
  25 |     location,
> 26 |     pageResources: loader.getResourcesForPathname(location.pathname),
  27 |   }
  28 | }
  29 | 
View compiled
▶ 43 stack frames were collapsed.
(anonymous function)
D:/GitHub/gatsby-starter-wordpress/.cache/app.js:42
  39 |   Root = Root.default
  40 | }
  41 | 
> 42 | domReady(() =>
  43 |   ReactDOM.render(
  44 |     <HotContainer>
  45 |       <Root />
View compiled
HTMLDocument.listener
D:/GitHub/gatsby-starter-wordpress/node_modules/domready/ready.js:23

I tried removing any of my custom written components until I ended up with the normal starting boilerplate. But it still wouldn't work. So I went on and even created a new project to test if gatsby-cli is still functional. But uninstalling and reinstalling the package did still not fix my problem. Any help or tip would be appreciated.

Metapsychology

Hmm, this looks like it might be resolved by removing your .cache folder (rm -rf .cache on *nix…not sure what the Windows equivalent is) and re-running gatsby develop. – Plexus

@Plexus I am not sure if it was your solution but it seems to work now. I additionally installed a Linux subsystem for Windows in the belief that it could somehow work. and no it does so thank you i guess. – Metapsychology

Answer 1

I had the same problem. I've fixed it by cleaning the browser cache. I've done gatsby clean before cleaning the chrome's cache but I think is not related.

Matz

Cleaning the browser cache (hard refresh with cmd + shift + R on macOS in Chrome) did it for me! Thank you! – Readytowear

Answer 2

had this issue with gatsby-plugin-offline plugin, cleaning the cache didn't help so I disabled the plugin for the development (local) environment, it works well on production

Ruble