gatsby: [v2][gatsby-link] Page prefetching error

Description

We just converted our site over to v2 and we’re getting this console error:

loader.js:51 Uncaught TypeError: Cannot read property 'map' of undefined
    at F (loader.js:51)
    at R (loader.js:115)
    at Object.enqueue (loader.js:238)
    at C (index.js:119)
    at index.js:51
    at Array.forEach (<anonymous>)
    at IntersectionObserver.<anonymous> (index.js:44)

Here’s the line it’s referring to in loader.js:

const createComponentUrls = componentChunkName =>
  window.___chunkMapping[componentChunkName].map(
    chunk => __PATH_PREFIX__ + chunk
  )

It appears to be related to gatsby-link. Whenever Links scroll into view, the errors add up. I noticed that source maps weren’t being produced the same way as they were for our v1 site. They’re not producing separate files: path---xyz.js.map and so on. I am able to see source maps for components and for the page I’m currently viewing in devtools.

image

Not sure if the source maps are related, but it seems to be.

I haven’t had any luck debugging this issue. It may be something with our site instead of Gatsby, but I didn’t know where I needed to start in figuring that out.

Steps to reproduce

Our site’s repo is private, but it’s only throwing these errors whenever I use the build. Development seems to work fine.

Environment

No custom webpack.config.js file.

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Binaries:
    Yarn: 1.12.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    gatsby: ^2.0.50 => 2.0.50 
    gatsby-image: ^2.0.20 => 2.0.20 
    gatsby-page-is-loading: ^0.1.0 => 0.1.1 
    gatsby-plugin-archives: ^1.0.4 => 1.0.4 
    gatsby-plugin-canonical-urls: ^2.0.7 => 2.0.7 
    gatsby-plugin-favicon: ^3.1.4 => 3.1.4 
    gatsby-plugin-google-tagmanager: ^2.0.6 => 2.0.6 
    gatsby-plugin-intercom-spa: 0.0.5 => 0.0.5 
    gatsby-plugin-manifest: ^2.0.9 => 2.0.9 
    gatsby-plugin-polyfill-io: ^1.0.3 => 1.0.5 
    gatsby-plugin-postcss: ^2.0.1 => 2.0.1 
    gatsby-plugin-react-helmet: ^3.0.1 => 3.0.2 
    gatsby-plugin-recaptcha: ^1.0.4 => 1.0.5 
    gatsby-plugin-remove-trailing-slashes: ^2.0.5 => 2.0.5 
    gatsby-plugin-segment: ^1.0.2 => 1.0.2 
    gatsby-plugin-sharp: ^2.0.12 => 2.0.12 
    gatsby-plugin-sitemap: ^2.0.2 => 2.0.2 
    gatsby-plugin-styled-jsx: ^3.0.2 => 3.0.2 
    gatsby-plugin-styled-jsx-postcss: ^2.0.2 => 2.0.2 
    gatsby-plugin-webpack-bundle-analyzer: ^1.0.3 => 1.0.3 
    gatsby-remark-copy-linked-files: ^2.0.6 => 2.0.6 
    gatsby-remark-images: ^2.0.6 => 2.0.6 
    gatsby-remark-prismjs: ^3.0.3 => 3.0.3 
    gatsby-remark-smartypants: ^2.0.6 => 2.0.6 
    gatsby-source-filesystem: ^2.0.8 => 2.0.8 
    gatsby-transformer-remark: ^2.1.12 => 2.1.12 
    gatsby-transformer-sharp: ^2.1.8 => 2.1.8 

Chrome version is 70.0.3538.102 (Official Build) (64-bit)

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 15 (12 by maintainers)

Most upvoted comments

Would be great for someone known with the Gatsby core to take a look at this as it looks like something is going wrong in the Gatsby internals. Reproducible with with babel-preset-expo.

@AustinLeeGordon @pieh

I’m also having the same error occur any time a <Link> is scrolled into the view (Figured that much out from @AustinLeeGordon 's hint earlier, thankfully! ). Unfortunately I’m not using any babel plugin besides babel-preset-expo.

Any ideas on how I could begin to debug and fix this?

Site available at www.titanvest.com

I removed dynamic-import-node from my babel plugins and the source maps seem to be working fine. Thanks @pieh for all of your help!