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

[AustinLeeGordon]

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.

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)

[pieh]

Is your site hosted anywhere so I could take a look and do some runtime debugging?

If not, here's what I would do - use devtools and just in console get output of window.___chunkMapping - it should be something like this:

this is mapping of internal template/page names to paths to assets we need to load to use that template/page

then toggle "pause on exception" or put breakpoint in place where it errors out and see what is componentChunkName that is causing this error

it may give some context or may not - but that's starting point

[pieh]

and as for path---xyz.js.map missing - in v2 we changed how we bundle and load data (results of query) - this is no longer handled by webpack so that won't appear in Sources tab - we output regular .json files now

[AustinLeeGordon]

@pieh Thanks for helping out!

Here's our live site: https://www.hutsoninc.com. It's running v1. Here's the latest v2 branch deploy: https://5bf44800f6d5ea5bd44d8a01--hutson.netlify.com/. Logging window.___chunkMapping gives me this;

When I pause on exception it shows that it's trying to fetch the /lawn-garden/gators page and tries to fetch the other pages that are linked as I continue.

[pieh]

Something weird is going on with webpack bundles there - it bundles everything in single js bundle (app-.js) - and it's over 2MB there so all components and page metadata is put there.

Do you either modify webpack config or use any plugin that does?

[AustinLeeGordon]

I have no custom webpack config, and I'm not modifying it in any of my local plugins or my gatsby-node.js file.

On the live v2 branch that I sent you, it's using these plugins:

• gatsby-plugin-favicon
• gatsby-plugin-postcss
• gatsby-plugin-styled-jsx-postcss

On my local environment I've tried different configurations with swapping out gatsby-plugin-styled-jsx-postcss and gatsby-plugin-postcss with gatsby-plugin-styled-jsx, passing styled-jsx-plugin-postcss as a plugin.

Here's the current local gatsby-config.js:

const plugins = [
    {
        resolve: `gatsby-plugin-styled-jsx`,
        options: {
            jsxPlugins: ['styled-jsx-plugin-postcss'],
            optimizeForSpeed: false,
            sourceMaps: true
        },
    },
        // ...

and for the Netlify branch deploy:

const plugins = [
    'gatsby-plugin-postcss',
    'gatsby-plugin-styled-jsx-postcss',
        // ...

In my local setup, gatsby-plugin-favicon is the only active plugin that modifies the webpack config. It's still producing the single bundle in app-xyz.js. Even commenting out each of those plugins still causes it to bundle in the single file.

[AustinLeeGordon]

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!

[Crizzooo]

@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

[jfrolich]

We have the same problem (single bundle and above error), with babel-plugin-react-native-web.

[jfrolich]

For some reason it's just creating a single app-[hash] bundle. I also walked through every plugin (and disabling them and build again, but no plugin seem to cause this).

[laurenskling]

I am too getting this error when certain links scroll into view. This starts happening when I upload a new version of my site (hosted on Netlify) and didn't do a hard refresh.

[jfrolich]

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.

[wardpeet]

Is everyone here using babel-preset-expo? Or any other plugins?

[jfrolich]

Yes

[github-actions[bot]]

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/contribute for more information about opening PRs, triaging issues, and contributing!

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

[github-actions[bot]]

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! 💪💜