Next.js: Helmet does not work.

Created on 28 Jun 2018 · 4Comments · Source: vercel/next.js

Bug report

Helmet does nor work.
That my repo https://github.com/markolofsen/nextjs-toolkit

Describe the bug

I followed all instructions https://github.com/zeit/next.js/tree/canary/examples/with-react-helmet but got an strange error.

To Reproduce

import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import JssProvider from 'react-jss/lib/JssProvider';
import flush from 'styled-jsx/server';
import getPageContext from '../utils/getPageContext';
import Helmet from 'react-helmet'

class MyDocument extends Document {
  static async getInitialProps (...args) {
    const documentProps = await super.getInitialProps(...args)
    // see https://github.com/nfl/react-helmet#server-usage for more information
    // 'head' was occupied by 'renderPage().head', we cannot use it
    return { ...documentProps, helmet: Helmet.renderStatic() }
  }

  // should render on <html>
  get helmetHtmlAttrComponents () {
    return this.props.helmet.htmlAttributes.toComponent()
  }

  // should render on <body>
  get helmetBodyAttrComponents () {
    return this.props.helmet.bodyAttributes.toComponent()
  }

  // should render on <head>
  get helmetHeadComponents () {
    return Object.keys(this.props.helmet)
      .filter(el => el !== 'htmlAttributes' && el !== 'bodyAttributes')
      .map(el => this.props.helmet[el].toComponent())
  }

  get helmetJsx () {
    return (<Helmet
      htmlAttributes={{lang: 'en'}}
      title='Hello next.js!'
      meta={[
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { property: 'og:title', content: 'Hello next.js!' }
      ]}
    />)
  }


  render() {
    const { pageContext } = this.props;

    return (
      <html lang="en" dir="ltr" {...this.helmetHtmlAttrComponents}>
        <Head>
          { this.helmetJsx }
          { this.helmetHeadComponents }

          <title>My page</title>
          <meta charSet="utf-8" />
          {/* Use minimum-scale=1 to enable GPU rasterization */}
          <meta
            name="viewport"
            content={
              'user-scalable=0, initial-scale=1, ' +
              'minimum-scale=1, width=device-width, height=device-height'
            }
          />
          {/* PWA primary color */}
          <meta name="theme-color" content={pageContext.theme.palette.primary.main} />
          <link rel="stylesheet" href="/_next/static/style.css" />
        </Head>
        <body {...this.helmetBodyAttrComponents}>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

MyDocument.getInitialProps = ctx => {
  // Resolution order
  //
  // On the server:
  // 1. page.getInitialProps
  // 2. document.getInitialProps
  // 3. page.render
  // 4. document.render
  //
  // On the server with error:
  // 2. document.getInitialProps
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. page.getInitialProps
  // 3. page.render

  // Get the context of the page to collected side effects.
  const pageContext = getPageContext();
  const page = ctx.renderPage(Component => props => (
    <JssProvider
      registry={pageContext.sheetsRegistry}
      generateClassName={pageContext.generateClassName}
    >
      <Component pageContext={pageContext} {...props} />
    </JssProvider>
  ));

  return {
    ...page,
    pageContext,
    styles: (
      <React.Fragment>
        <style
          id="jss-server-side"
          // eslint-disable-next-line react/no-danger
          dangerouslySetInnerHTML={{ __html: pageContext.sheetsRegistry.toString() }}
        />
        {flush() || null}
      </React.Fragment>
    ),
  };
};

export default MyDocument;

Steps to reproduce the behavior, please provide code snippets or a repository:

Go to '...'
Click on '....'
Scroll down to '....'
See error

Expected behavior

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

Screenshots

If applicable, add screenshots to help explain your problem.

System information

Mac OS
Chrome
Next.js: latest

Additional context

new Store with:  {}
{ TypeError: Cannot read property 'htmlAttributes' of undefined
    at MyDocument.get (pages/_document.js:21:0)
    at MyDocument.render (pages/_document.js:52:0)
    at resolve (/Users/mark/Documents/htdocs/with-react-i18next/node_modules/react-dom/cjs/react-dom-server.node.development.js:2149:18)
    at ReactDOMServerRenderer.render (/Users/mark/Documents/htdocs/with-react-i18next/node_modules/react-dom/cjs/react-dom-server.node.development.js:2260:22)
    at ReactDOMServerRenderer.read (/Users/mark/Documents/htdocs/with-react-i18next/node_modules/react-dom/cjs/react-dom-server.node.development.js:2234:19)
    at renderToStaticMarkup (/Users/mark/Documents/htdocs/with-react-i18next/node_modules/react-dom/cjs/react-dom-server.node.development.js:2512:25)
    at _callee3$ (/Users/mark/Documents/htdocs/with-react-i18next/node_modules/next/dist/server/render.js:338:100)
    at tryCatch (/Users/mark/Documents/htdocs/with-react-i18next/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/Users/mark/Documents/htdocs/with-react-i18next/node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/mark/Documents/htdocs/with-react-i18next/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/Users/mark/Documents/htdocs/with-react-i18next/node_modules/next/node_modules/@babel/runtime/helpers/asyncToGenerator.js:12:30)
    at _next (/Users/mark/Documents/htdocs/with-react-i18next/node_modules/next/node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:9)
    at <anonymous> sourceMapsApplied: true }

Source