joe-bell / next-google-fonts Goto Github PK

Describe the bug
Hey, since updating to v1.3.0, <GoogleFonts/> completely breaks the app. I changed nothing else, and rolling back to v1.2.1 fixes it. Most recent versions of all packages, node v14.

To Reproduce

export default function App({Component, pageProps}) {
  return (
    <NumerousContextProviders>
      <GoogleFonts href="https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Bungee&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" />

      <Component {...pageProps} />
    </NumerousContextProviders>
  );
}

Additional context

// console.log(<GoogleFonts href={...} />)

{
  '$$typeof': Symbol(react.element),
  type: { GoogleFonts: [Function: l], default: [Function: l] },
  key: null,
  ref: null,
  props: {
    href: 'https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Bungee&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'
  },
  _owner: null,
  _store: {}
}

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check your code at _app.js:59.
    at App (webpack-internal:///./pages/_app.js:63:5)
    at AppContainer ([REPO]/node_modules/next/dist/next-server/server/render.js:25:899)
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at ReactDOMServerRenderer.render ([REPO]/node_modules/react-dom/cjs/react-dom-server.node.development.js:4053:17)
    at ReactDOMServerRenderer.read ([REPO]/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString ([REPO]/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage ([REPO]/node_modules/next/dist/next-server/server/render.js:54:851)
    at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:135:19)
    at loadGetInitialProps ([REPO]/node_modules/next/dist/next-server/lib/utils.js:5:101)
    at renderToHTML ([REPO]/node_modules/next/dist/next-server/server/render.js:54:1142)
    at async [REPO]/node_modules/next/dist/next-server/server/next-server.js:107:97
    at async [REPO]/node_modules/next/dist/next-server/server/next-server.js:100:142
    at async DevServer.renderToHTMLWithComponents ([REPO]/node_modules/next/dist/next-server/server/next-server.js:132:387)
    at async DevServer.renderToHTML ([REPO]/node_modules/next/dist/next-server/server/next-server.js:133:522)
    at async DevServer.renderToHTML ([REPO]/node_modules/next/dist/server/next-dev-server.js:34:578)
    at async DevServer.render ([REPO]/node_modules/next/dist/next-server/server/next-server.js:72:236)
    at async Object.fn ([REPO]/node_modules/next/dist/next-server/server/next-server.js:56:580)
    at async Router.execute ([REPO]/node_modules/next/dist/next-server/server/router.js:23:67)
    at async DevServer.run ([REPO]/node_modules/next/dist/next-server/server/next-server.js:66:1042)
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

I think using useLayoutEffect will be better.

const useIsomorphicLayoutEffect =  typeof window !== 'undefined' ? useLayoutEffect : useEffect;

useIsomorphicLayoutEffect (() => {
    if (!hydratedRef.current) {
      hydrated = true;
      hydratedRef.current = true;
      rerender(true);
    }
}, []);

NextJS 10.0 (out today) changes NextJS 9.5.2 experimental feature font optimization for Google Fonts to be part of the core NextJS package vercel/next.js#17450. Will this plugin automatically use this optimization or should we revert back to dropping the <link> tag back in manually?

Describe the bug
A clear and concise description of what the bug is.

There are two duplicates of the following preload <link> tag:

<link 
  rel="preload" 
  as="style" 
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&amp;display=swap"
>

To Reproduce
Steps to reproduce the behavior:

1. Go to https://develop.tutorbook.org.
2. Open up devtools inspector.
3. See duplicates.

You can also reproduce locally (see components/page/index.tsx in tutorbookapp/tutorbook):

1. Follow these instructions.
2. Open up http://localhost:3000.
3. See duplicates.

Expected behavior
A clear and concise description of what you expected to happen.

There should only be a single <link> tag that is located near the other style tags (instead of being the first tag within the <head> element).

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Pop_OS! 20.04 (Ubuntu 20.04)
• Browser: Firefox 87.0
• Version: 2.1.0

Describe the bug
As coded, the GoogleFonts should be expanded as <NextHead> <link ... /> </NextHead>.
And the Head component (next/document) only accept what directly in <header />, such as <link />.
So the example you wrote in README.md seems not working anymore. (seen as below)

To Reproduce
Steps to reproduce the behavior:

1. Follow the instruction in README.md

Expected behavior
Several <link> related to async loading fonts were expected.

Screenshots

I try to use both <GoogleFonts /> and <link /> in <Head />, as you can see, only <link /> was dealing with properly.

Desktop (please complete the following information):

• OS: Arch Linux x86_64 5.8.12-arch1-1
• Browser Chromium
• Version 85.0.4183.121

Additional context
I think Remove outside <Head> in the component is just ok. (And of course, docs should also be updated)

If I want to add a font to all pages on my site, I am wondering the recommended way of doing this? Via the _document.js file? On my main layout file? My pages/index.js file? Something else?

I'm not 100% clear how to do this properly.

I've started work on extracting out the React.js functionality into a separate package called react-google-fonts

I did attempt to do this in 1.2.0 but Next.js seemed to drop the stylesheet link. I need to investigate this a little further and find a way to share functionality between the two

Describe the bug
when trying to install "yarn add next-google-fonts" i get this warning

warning " > [email protected]" has incorrect peer dependency "next@>= 10.0.7"

To Reproduce
yarn add next-google-fonts
Is there a way to fix it?

Is there some configurations I have to put for mobile devices?

This works great on Chrome, but it's not loading the font for Safari.
Is there something I need to add to make safari work?

Describe the bug

Since the update to 2.2.0, I can no longer inject multiple <GoogleFonts> tags. This breaks my font-selection widget. Version 2.1.0 works, so it looks like the new keys designed to prevent duplicates are to blame.

I see why the key attributes are a good idea, but I think they need to be based on (a) the href being requested or (b) a key chosen by the end-user.

Here's my full use-case:

1. User selects their font category
2. A selector widget populates with examples of the font they chose and makes individual <GoogleFonts> tags for all of the fonts in that category. I request them separately because it makes it appear faster to the user
3. The user cycles through choices
4. Whichever font is currently selected, I download the complete set so they can see a live preview of the font on their website.
5. They can change category or click save.

All this to say, I make a lot of font requests.

Expected behavior

So, my inclination would be to support the (a) and (b) cases above. I think most users would assume you can use the component multiple times.

Thanks!

If I'm customizing my main document structure via providing _document.tsx, could you provide guidance on how to use next-google-fonts with the vanilla Head component?

Would it be like so? As this does not appear to work for me.

render() {
    return (
      <Html lang="en">
        <React.Fragment>
          <Head />
          <GoogleFonts href="https://fonts.googleapis.com/..."/>
        </React.Fragment>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}