title: Prefetch works but throws an "uncaught (in promise) error"
body: <p>I am trying to use the <code>prefetch</code> directive with my fonts as advised by Chrome Lighthouse audit report. However, doing so is throwing the following error:</p>
  
  <blockquote>
    <p>Uncaught (in promise) Error: 3000ms timeout exceeded</p>
  </blockquote>
  
  <p>My stack involves NextJS for SSR. My <strong>index.jsx</strong> looks like this:</p>
  
  <pre><code>import React, { PureComponent, Fragment } from 'react';
  import Typography from '@material-ui/core/Typography';
  import { withStyles } from '@material-ui/core/styles';
  import Head from 'next/head';
  import Link from 'next/link';
  import withRoot from '../lib/withRoot';
  import Fonts from '../lib/Fonts'
  
  const styles = theme =&gt; ({
    root: {
      textAlign: 'center',
      paddingTop: theme.spacing.unit * 20,
    },
    paragraph: {
      fontFamily: 'Oswald',
    }
  });
  
  class Index extends PureComponent {
    constructor(props) {
      super(props);
      this.state = {
        open: false,
      };
    }
  
    componentDidMount() {
      if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/serviceWorker.js'); }
      Fonts();
    }
  
    render() {
      const { classes } = this.props;
      const { open } = this.state; // eslint-disable-line no-unused-vars
      const title = 'Home';
      const description = 'This is the description for the homepage';
      return (
        &lt;Fragment&gt;
          &lt;Head&gt;
            &lt;title&gt;{ title }&lt;/title&gt;
            &lt;meta name="description" content={description} key="description" /&gt;
          &lt;/Head&gt;
          &lt;div className={classes.root}&gt;
            &lt;Typography gutterBottom&gt;
              &lt;Link href="/blog"&gt;
                &lt;a&gt;View posts page&lt;/a&gt;
              &lt;/Link&gt;
            &lt;/Typography&gt;
          &lt;/div&gt;
          &lt;p className={classes.paragraph}&gt;All men must die&lt;/p&gt;
        &lt;/Fragment&gt;
      );
    }
  }
  
  export default withRoot(withStyles(styles)(Index));
  </code></pre>
  
  <p>And the <strong>Fonts.js</strong> looks like this:</p>
  
  <pre><code>const FontFaceObserver = require('fontfaceobserver');
  
  const addFont = (fontUrl) =&gt; {
    const fontName = fontUrl.split('=')[1].split(':')[0].split('&amp;')[0];
    const fontNameWithSpace = fontName.replace(/\+/g, ' ');
    const link = document.createElement('link');
    link.href = fontUrl;
    link.rel = 'stylesheet';
    document.head.appendChild(link);
    const addedFont = new FontFaceObserver(fontNameWithSpace);
    addedFont.load().then(() =&gt; {
      document.documentElement.classList.add(fontName);
    });
  };
  
  const Fonts = () =&gt; {
    // Oswald
    addFont('https://fonts.googleapis.com/css?family=Oswald:400,500,600,700&amp;display=swap');
    // Roboto
    addFont('https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap');
    // Source Sans Pro
    addFont('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600&amp;display=swap');
  };
  
  export default Fonts;
  </code></pre>
  
  <p>As you can see, I'm running the <strong>Fonts()</strong> method only on the browser via a <strong>componentDidMount()</strong>. What's going wrong?</p>