Reactjs 预回迁有效，但会抛出一个；未兑现的（承诺中的）错误“；_Reactjs_Next.js_Preconnect

Reactjs 预回迁有效，但会抛出一个；未兑现的（承诺中的）错误“；

reactjs next.js

Reactjs 预回迁有效，但会抛出一个；未兑现的（承诺中的）错误“；,reactjs,next.js,preconnect,Reactjs,Next.js,Preconnect,根据Chrome Lighthouse审计报告的建议，我正在尝试使用预回迁指令与我的字体。但是，这样做会引发以下错误：未捕获（承诺中）错误：超过3000毫秒超时我的堆栈包含用于SSR的NextJS。我的index.jsx如下所示： import React, { PureComponent, Fragment } from 'react'; import Typography from '@material-ui/core/Typography'; import { withStyles }

根据Chrome Lighthouse审计报告的建议，我正在尝试使用

预回迁

指令与我的字体。但是，这样做会引发以下错误：

未捕获（承诺中）错误：超过3000毫秒超时

我的堆栈包含用于SSR的NextJS。我的index.jsx如下所示：

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 => ({
  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 (
      <Fragment>
        <Head>
          <title>{ title }</title>
          <meta name="description" content={description} key="description" />
        </Head>
        <div className={classes.root}>
          <Typography gutterBottom>
            <Link href="/blog">
              <a>View posts page</a>
            </Link>
          </Typography>
        </div>
        <p className={classes.paragraph}>All men must die</p>
      </Fragment>
    );
  }
}

export default withRoot(withStyles(styles)(Index));

const FontFaceObserver = require('fontfaceobserver');

const addFont = (fontUrl) => {
  const fontName = fontUrl.split('=')[1].split(':')[0].split('&')[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(() => {
    document.documentElement.classList.add(fontName);
  });
};

const Fonts = () => {
  // Oswald
  addFont('https://fonts.googleapis.com/css?family=Oswald:400,500,600,700&display=swap');
  // Roboto
  addFont('https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap');
  // Source Sans Pro
  addFont('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600&display=swap');
};

export default Fonts;

如您所见，我仅通过组件didmount（）在浏览器上运行字体（）方法。出什么问题了？

FontFaceObserver加载有一些额外的参数

 * Starts observing the loading of the specified font. Immediately returns a new Promise that resolves when the font is available and rejected when the font is not available.
 * @param testString If your font doesn't contain latin characters you can pass a custom test string.
 * @param timeout The default timeout for giving up on font loading is 3 seconds. You can increase or decrease this by passing a number of milliseconds.
 */
load(testString?: string | null, timeout?: number): Promise<void>;

 // null for testString parameter
 addedFont.load(null,5000).then(() => {
document.documentElement.classList.add(fontName);
});