Gatsby: [gatsby-plugin-offline] causing "A preload <link> was found... but was not used by the browser"

[styxlab]

Description

According to the Lighthouse report (version 6.1.0), gatsby-plugin-offline inhibits the browser to properly use preload links.

Steps to reproduce

$ git clone https://github.com/gatsbyjs/gatsby-starter-blog.git
$ cd gatsby-starter-blog
$ sed -i -e  's|// `gatsby-plugin-offline`|`gatsby-plugin-offline`|' gatsby-config.js
$ yarn; yarn build
$ gatsby serve
$ lighthouse http://localhost:9000 --only-categories=performance --view

Adding crossorigin attribute does not help

I tried to do the obvious and installed the plugin gatsby-plugin-preload-link-crossorigin. The plugin adds the crossorigin attribute but the Lighthouse warning remains.

Expected result

No Preload key requests warnings in the Lighthouse report when using gatsby-plugin-offline.

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

System:
OS: Linux 5.6 Fedora 30 (Workstation Edition) 30 (Workstation Edition)
CPU: (8) x64 Intel(R) Core(TM) i7-3770K CPU @ 3.50GHz
Shell: 5.0.11 - /bin/bash
Binaries:
Node: 12.18.1 - /usr/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.5 - /usr/local/bin/npm
Languages:
Python: 2.7.18 - /usr/bin/python
Browsers:
Chrome: beta
Firefox: 76.0
npmPackages:
gatsby: ^2.23.10 => 2.23.10
gatsby-image: ^2.4.8 => 2.4.8
gatsby-plugin-feed: ^2.5.6 => 2.5.6
gatsby-plugin-google-analytics: ^2.3.5 => 2.3.5
gatsby-plugin-manifest: ^2.4.13 => 2.4.13
gatsby-plugin-offline: ^3.2.12 => 3.2.12
gatsby-plugin-react-helmet: ^3.3.5 => 3.3.5
gatsby-plugin-sharp: ^2.6.13 => 2.6.13
gatsby-plugin-typography: ^2.5.5 => 2.5.5
gatsby-remark-copy-linked-files: ^2.3.6 => 2.3.6
gatsby-remark-images: ^3.3.12 => 3.3.12
gatsby-remark-prismjs: ^3.5.5 => 3.5.5
gatsby-remark-responsive-iframe: ^2.4.6 => 2.4.6
gatsby-remark-smartypants: ^2.3.5 => 2.3.5
gatsby-source-filesystem: ^2.3.13 => 2.3.13
gatsby-transformer-remark: ^2.8.18 => 2.8.18
gatsby-transformer-sharp: ^2.5.6 => 2.5.6
npmGlobalPackages:
gatsby-cli: 2.12.21
gatsby: 2.23.1

Thanks for looking into this!

[codingwithchris]

Hi, there! I believe I am having a similar problem to @styxlab.

I just started seeing this recently. Every single preload is throwing this error locally AND on production in the JS console after about 10 seconds of being on the page.

This is happening in Chrome, Firefox, and Safari. I should note that I am NOT using gatsby-plugin-offline anymore. In an effort to resolve this issue, I uninstalled it, removed it from gatsby-config.js, ran gatsby clean, and unregistered any remaining service workers. I am still seeing this issue, which makes me believe it could be unrelated to gatsby-plugin-offline and be a larger issue with the Gatsby build process.

To be sure it wasn't a browser extension issue, Ifully disabled ad-blocking in all 3 browsers but still received the following warnings:

Local

Local Console Warnings

The resource at “http://localhost:8000/fonts/stage-1/VentiCF-Bold--stage1.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. localhost:8000
The resource at “http://localhost:8000/fonts/stage-1/Merriweather-Light--stage1.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. localhost:8000
The resource at “http://localhost:8000/fonts/stage-1/Merriweather-Bold--stage1.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

The resources mentioned above are being loaded in via gatsby-ssr.js:

export const onRenderBody = ({ setHeadComponents }) => {
    setHeadComponents([
        /**
         * Preload Load stage 1 font assets and via SSR to prevent FLOUT (Flash of Unstyled Text)
         */
        <link
            key="Font-Preload--Venti-Bold"
            rel="preload"
            href="/fonts/stage-1/VentiCF-Bold--stage1.woff2"
            as="font"
            type="font/woff2"
            crossOrigin="anonymous"
        />,
        <link
            key="Font-Preload--Merriweather-Light"
            rel="preload"
            href="/fonts/stage-1/Merriweather-Light--stage1.woff2"
            as="font"
            type="font/woff2"
            crossOrigin="anonymous"
        />,
        <link
            key="Font-Preload--Merriweather-Bold"
            rel="preload"
            href="/fonts/stage-1/Merriweather-Bold--stage1.woff2"
            as="font"
            type="font/woff2"
            crossOrigin="anonymous"
        />,
    ]);
};

Production

This is where the problem comes into full light. Every single preload, including the ones provided by Gatsby at build time, are throwing the error. This leads me to believe it is not user error since it's not just my custom preloads that are causing issues.

Production Console Warnings

The resource at “https://production-website/page-data/app-data.json” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. our-work
The resource at “https://production-website/page-data/our-work/page-data.json” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. our-work
The resource at “https://production-website/fonts/stage-1/VentiCF-Bold--stage1.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. our-work
The resource at “https://production-website/fonts/stage-1/Merriweather-Light--stage1.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. our-work
The resource at “https://production-website/fonts/stage-1/Merriweather-Bold--stage1.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. our-work
The resource at “https://production-website/component---src-pages-our-work-tsx-9b0b6e85c3a7c83bccc2.js” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. our-work
The resource at “https://production-website/3ec4b9898f8d00e2b451fa1f311f78b50324d50b-e8afe59db05df792daa8.js” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. our-work
The resource at “https://production-website/app-3cfc8f64ecd607fef620.js” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. our-work
The resource at “https://production-website/05d954cf-18a2d40a9006230ddb1a.js” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. our-work
The resource at “https://production-website/framework-6bf65813ef0f9943b78c.js” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. our-work
The resource at “https://production-website/webpack-runtime-1857610d33f5db7482a2.js” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

Environment

  System:
    OS: macOS 10.15.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.3.0 - ~/.nvm/versions/node/v14.3.0/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v14.3.0/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.3.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 83.0.4103.116
    Safari: 13.1.1
  npmPackages:
    gatsby: ^2.24.1 => 2.24.1 
    gatsby-background-image: ^1.1.1 => 1.1.1 
    gatsby-image: ^2.4.13 => 2.4.13 
    gatsby-plugin-manifest: ^2.4.18 => 2.4.18 
    gatsby-plugin-module-resolver: ^1.0.3 => 1.0.3 
    gatsby-plugin-netlify: ^2.3.11 => 2.3.11 
    gatsby-plugin-react-helmet: ^3.3.10 => 3.3.10 
    gatsby-plugin-robots-txt: ^1.5.1 => 1.5.1 
    gatsby-plugin-sharp: ^2.6.19 => 2.6.19 
    gatsby-plugin-sitemap: ^2.4.11 => 2.4.11 
    gatsby-plugin-styled-components: ^3.3.10 => 3.3.10 
    gatsby-plugin-typescript: ^2.4.14 => 2.4.14 
    gatsby-source-filesystem: ^2.3.19 => 2.3.19 
    gatsby-source-prismic: ^3.1.4 => 3.1.4 
    gatsby-transformer-sharp: ^2.5.11 => 2.5.11 

Please let me know if I can supply any additional information.

[codingwithchris]

Update... my issue was because I improperly returned from one of my new contexts when on SSR (it is using window, so I had to bail if window did not exist). I returned null which broke SSR. Once I returned <>{children}</> instead of null, all of the above errors went away.

This renders my previous comment void.

This could still mean that @styxlab's issue with gatsby-plugin-offline is still valid.

[lvtz]

I haven't noticed this issue on the localhost, faced it on production build, with the newest Google Chrome and Vercel.

I have using the newest gatsby-plugin-offline. An error also occurs while using gatsby-plugin-preload-link-crossorigin.

[pantaley]

I got the same warnings.

[panzacoder]

Most likely a duplicate of #16984

[xstable]

Is there any workaround or fix for that issue ... so that we could patch it, till it's fixed and merged?

[paultannenbaum]

Bump. In our case, we are just using gatsby-plugin-offline and seeing the warnings in lighthouse.