reactjs 必须调用字体加载器并将其分配给Nextjs13上模块作用域中的常量

gwbalxhn  于 2023-01-08  发布在  React
关注(0)|答案(1)|浏览(98)

我试图加载谷歌字体到Nextjs项目,但我得到下面的错误。在nextjs 12它的工作正常,但我必须使用字体的头部链接。这个错误也发生在使用@next/font/local。
我一直在挣扎,任何帮助都是感激的。
我正在使用官方文档过程添加全局字体。我在Nextjs 13上。
My _app.tsx代码为:

import { useApollo } from "@api/apollo/apolloclient";
import { ApolloProvider } from "@apollo/client";
import { CacheProvider, EmotionCache } from "@emotion/react";
import { Ubuntu } from "@next/font/google";

import "focus-visible/dist/focus-visible";

import { DefaultSeo } from "next-seo";
import { AppProps } from "next/app";

import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";

import theme from "@definitions/chakra/theme";
import { ThemeColorProvider } from "@definitions/context/theme";
import createEmotionCache from "@definitions/utils/createEmotionCache";

import Layout from "@layouts/default";

import "@styles/app.css";
import "@styles/global.scss";

import SEO from "../../next-seo.config";
import { useEffect, useState } from "react";

type ComponentWithPageLayout = AppProps & {
  Component: AppProps["Component"] & {
    PageLayout?: React.ComponentType;
  };
  emotionCache: EmotionCache;
};

const clientSideEmotionCache = createEmotionCache();

function sApp({
  Component,
  emotionCache = clientSideEmotionCache,
  pageProps,
}: ComponentWithPageLayout): JSX.Element {
  const apolloClient = useApollo(pageProps);
  const AnyComponent = Component as any;
  const Layoutio = Component.PageLayout as any;

  const ubt = Ubuntu({
    weight: ["300", "400", "500", "700"],
    style: ["normal", "italic"],
  });

  const [showChild, setShowChild] = useState(false);
  useEffect(() => {
    setShowChild(true);
  }, []);

  if (!showChild) {
    return null;
  }

  if (typeof window === "undefined") {
    return <></>;
  } else {
    return (
      <>

      <style jsx global>{`
          html {
            font-family: ${ubt.style.fontFamily};
          }
        `}</style>

        <CacheProvider value={emotionCache}>
          <ApolloProvider client={apolloClient}>
            <ThemeColorProvider>
              <ChakraProvider theme={theme}>
                <ColorModeScript
                  initialColorMode={theme.config.initialColorMode}
                />
                <DefaultSeo {...SEO} /> 
                {Component.PageLayout ? (
                  <Layoutio>
                    <AnyComponent {...pageProps} />
                  </Layoutio>
                ) : (
                  <Layout>
                    <AnyComponent {...pageProps} />
                  </Layout>
                )}
              </ChakraProvider>
            </ThemeColorProvider>
          </ApolloProvider>
        </CacheProvider>
      </>
    );
  }
}

export default App;

6l7fqoea

6l7fqoea1#

只需将ubt常量移到sApp函数上方:)

相关问题