Next.js: TypeError: Cannot read property 'head' of undefined

[soulmachine]

I'm using Next.js with Typescript, my code passes compiler very well, but in runtime the web page crashes with the following error:

> Ready on http://localhost:3000
TypeError: Cannot read property 'head' of undefined
    at Head.render (/Users/frankdai/github/with-react-intl/node_modules/next/dist/server/document.js:160:41)
    at za (/Users/frankdai/github/with-react-intl/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:32:322)
    at a.render (/Users/frankdai/github/with-react-intl/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:18)
    at a.read (/Users/frankdai/github/with-react-intl/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:35:250)
    at renderToStaticMarkup (/Users/frankdai/github/with-react-intl/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:75)
    at _callee3$ (/Users/frankdai/github/with-react-intl/node_modules/next/dist/server/render.js:227:100)
    at tryCatch (/Users/frankdai/github/with-react-intl/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/Users/frankdai/github/with-react-intl/node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/frankdai/github/with-react-intl/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/Users/frankdai/github/with-react-intl/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)

Your Environment

| Tech | Version |
|---------|---------|
| next | 4.2.1 |
| node | v9.3.0 |
| OS | macOS latest |
| browser | Chrome Version 63.0.3239.84 (Official Build) (64-bit) |
| etc | typescript 2.6.2 |

[soulmachine]

This error disappeared after I changed my code, code is here https://github.com/soulmachine/with-react-intl

[matb33]

I ran into the same error message, and it was because I was doing this:

import { Head } from 'next/document'

instead of

import Head from 'next/head'

[Timer]

For individuals finding this solution via Google:

Please note that import { Head } from 'next/document' still must be used in the _document.js file.

The import Head from 'next/head' import should be used everywhere else!