Next.js: with-typescript-styled-components: Cannot destructure property `styles` of 'undefined' or 'null' when using <Head>

Created on 13 Aug 2019 · 4Comments · Source: vercel/next.js

Examples bug report

Example name

with-typescript-styled-components

Describe the bug

Using the with-typescript-styled-components example I am trying to change the title of the root page, using the Next.js provided "Head" component (import { Head } from 'next/document')

When trying to start the app, whether through yarn dev or yarn build then yarn start, I receive the error "TypeError: Cannot destructure property styles of 'undefined' or 'null'."

To Reproduce

Check out the with-typescript-styled-components example (clone next.js repo and copy the examples/with-typescript-styled-components to a seperate folder)
Run yarn
Change page/index.tsx to:

import React from 'react'
import styled from 'styled-components'
import { Head } from 'next/document';

const Title = styled.h1`
  color: red;
  font-size: 50px;
`

export default () => <>
<Head><title>This is the title</title></Head>
<Title>My page</Title>
</>

Run yarn dev
Navigate to localhost:3000
Notice error message "TypeError: Cannot destructure property styles of 'undefined' or 'null'."

Expected behavior

After running the app, and navigating to localhost:3000, I should be presented with a page with the text "My page" and the tab in chrome should read "This is the title".

Screenshots

Error

System information

OS: MacOS
Browser: Chrome
Version of Next.js: 9.0.4 ("next": "latest")

Additional context

Please let me know if you require additional context, or if I have created this bug report incorrectly.

Source

kyrim

👍3

Most helpful comment

Hi, the Head export from next/document is only supposed to be used in pages/_document. In other pages you are supposed to use next/head. See the Populating Head section of our docs for more info.

ijjk on 13 Aug 2019

👍14 🎉2

All 4 comments

I'm getting the same issue in a project i've just updated to v9 (not using typescript or styled components), i can get titles working by changing the import to:

import Head from 'next/head';

TH-NK-JamesAllis on 13 Aug 2019

👍8

ijjk on 13 Aug 2019

👍14 🎉2

Hi, the Head export from next/document is only supposed to be used in pages/_document. In other pages you are supposed to use next/head. See the Populating Head section of our docs for more info.

I'm getting the same issue in a project i've just updated to v9 (not using typescript or styled components), i can get titles working by changing the import to:

import Head from 'next/head';

Ahh I see, thank you both, that did the trick!

kyrim on 14 Aug 2019

🎉1

That's also happened to me. The 'auto-import' has imported Head from next/document as a destructing component.