Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Font optimization can result in error: "TypeError: Cannot read property 'type' of null" #32024

Closed
dm430 opened this issue Dec 2, 2021 · 4 comments · Fixed by #32027
Closed

Font optimization can result in error: "TypeError: Cannot read property 'type' of null" #32024

dm430 opened this issue Dec 2, 2021 · 4 comments · Fixed by #32027
Labels
Font (next/font) Related to Next.js Font Optimization.

Comments

@dm430
Copy link
Contributor

dm430 commented Dec 2, 2021

What version of Next.js are you using?

12.0.4

What version of Node.js are you using?

12.22.3

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next start

Describe the Bug

When a child element or fragment of the Head component contains a falsely value in its children then the following build/runtime error will surface,"TypeError: Cannot read property 'type' of null". This error can surface at runtime or at build time depending on the build method being used. The SWC build system will surface the error at build time while the legacy build methodology will result in a runtime error.

Expected Behavior

Falsey child elements of elements contained within the Head component should not result in a build/runtime error.

To Reproduce

  1. Place the following snippet of code in your_document.js.
<Head>
    <>
        {/* falsy child elements are not removed. This will result in 'null' when makeStylesheetInert is called recursively. */}
        {null}
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet" />
   </>
 </Head>
  1. Run yarn build.
    *Note: If you are using SWC the error will surface on step here.
  2. Run yarn start.
  3. Visit any page.

Please see the following repo for reproduction.
@dm430 dm430 added the bug Issue was opened via the bug report template. label Dec 2, 2021
@dm430
Copy link
Contributor Author

dm430 commented Dec 2, 2021

Im prepping a fix for this issue.

@dm430 dm430 mentioned this issue Dec 2, 2021
Merged
10 tasks
@balazsorban44 balazsorban44 added Font (next/font) Related to Next.js Font Optimization. and removed Font (next/font) Related to Next.js Font Optimization. labels Dec 2, 2021
@balazsorban44
Copy link
Member

Curious why you titled this as a Font optimization error?

@DevinWallKcl
Copy link
Contributor

DevinWallKcl commented Dec 2, 2021 •
edited

Curious why you titled this as a Font optimization error?

The error is occurring in a function called makeStylesheetInert. This appears to be linked to the concept of Font optimization as the error does not occur when font optimization is disabled.

If this needs retitled I can make that change.

@timneutkens timneutkens added Font (next/font) Related to Next.js Font Optimization. kind: bug and removed bug Issue was opened via the bug report template. labels Dec 2, 2021
@kodiakhq kodiakhq bot closed this as completed in #32027 Jan 3, 2022
kodiakhq bot pushed a commit that referenced this issue Jan 3, 2022
@dm430 @DevinWallKcl
Fixes issue with makeStylesheetInert (#32027)
d0e72fd 
Fixes #32024

Fixing makeStylesheetInert.
Fixes log import.



## Bug

- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`


Co-authored-by: Devin Wall <87490815+DevinWallKcl@users.noreply.github.com>
@balazsorban44
Copy link
Member

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@vercel vercel locked as resolved and limited conversation to collaborators Feb 2, 2022
natew pushed a commit to natew/next.js that referenced this issue Feb 16, 2022
@dm430 @DevinWallKcl @natew
Fixes issue with makeStylesheetInert (vercel#32027)
a1af94e 
Fixes vercel#32024

Fixing makeStylesheetInert.
Fixes log import.



## Bug

- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`


Co-authored-by: Devin Wall <87490815+DevinWallKcl@users.noreply.github.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Font (next/font) Related to Next.js Font Optimization.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fixes issue with makeStylesheetInert dm430/next.js
4 participants
@dm430 @timneutkens @balazsorban44 @DevinWallKcl