Component using withNamespaces inside next/head crashes the app #251

Nelrohd · 2019-04-01T09:42:24Z

Describe the bug

Using a MyComponent with withNamespaces("common")(MyComponent) inside <Head> of next/head triggers an errors:

TypeError: Cannot read property 'wait' of null
    at NamespacesConsumerComponent.render (my-project/node_modules/react-i18next/dist/commonjs/NamespacesConsumer.js:213:33)

Occurs in next-i18next version

Any version.

Steps to reproduce

Make a component using withNamespaces:

import React, { Component } from "react";

export const MetaOgTag = withNamespaces("common")(
  class extends Component {
    render() {
      const { title } = this.props;

      return (
        <>
          <meta property="og:title" content={t(title)} />
        </>
      )
    }
  }
);

Use it in your pages/index.js inside <head>...</head>:

import React from "react";
import { MetaOgTag } from "../components/MetaOgTag";
import Head from "next/head";

export default class Index extends React.Component {

  render() {
    return (
      <Head>
        <MetaOgTag title={"Hello World"} />
      </Head>
    );
  }
}

Reload your app and see the error.

Expected behaviour

It should not crash.

Screenshots

None.

OS (please complete the following information)

Macbook Pro 2017 13 inches
Browser: Google Chrome - Version 73.0.3683.86 (Official Build) (64-bit)

Additional context

It looks like it's not possible to use i18n inside head because something not ready/setup yet.

The text was updated successfully, but these errors were encountered:

isaachinman · 2019-04-01T09:54:41Z

Hi @Nelrohd - looks like that error is coming out of react-i18next. Most likely, req.i18n is still null. Did you debug any further?

kachkaev · 2019-04-01T11:26:52Z

Seems like i18n from React context is not available inside <Head />, so withNamespaces cannot get it. In one of my projects I just pass t as a prop and all works. When I need to reference a string in the common namespace I prefix the id with it, e.g. t("common:foobar").

Feel free to copy the component code (it's written in TypeScript).

import _ from "lodash";
import Head from "next/head";
import { useContext } from "react";
import { format, parse } from "url";
import { TFunction } from "../../i18n";
import { SsrUrlContext } from "../../lib/appContext";

interface Props {
  t: TFunction;
  title?: string | false;
  titleSuffix?: string | false;
  description?: string | false;
  keywords?: string | false;
  keywordsSuffix?: string | false;
  canonicalUrl?: string | false;
  supportedGetParamsInCanonicalUrl?: string[];
}

const PageMeta = ({
  t,
  title,
  titleSuffix,
  description,
  keywords,
  keywordsSuffix,
  canonicalUrl,
  supportedGetParamsInCanonicalUrl,
}: Props) => {
  const ssrUrl = useContext(SsrUrlContext);
  let derivedCanonicalUrl;
  if (canonicalUrl) {
    derivedCanonicalUrl = canonicalUrl;
  } else if (canonicalUrl !== false) {
    const { port, query, ...rest } = parse(
      typeof window !== "undefined" ? window.location.href : ssrUrl,
      true,
    );
    const cleanedQuery = _.pick(query, supportedGetParamsInCanonicalUrl || []);
    derivedCanonicalUrl = format({
      ...rest,
      hostname: undefined,
      host: undefined,
      protocol: undefined,
      search: undefined,
      query: _.fromPairs(_.orderBy(_.toPairs(cleanedQuery), (pair) => pair[0])),
      hash: undefined,
    }).replace("//", "");
  }

  const derivedTitleSuffix =
    titleSuffix !== false ? titleSuffix || t("common:pageTitleSuffix") : "";
  const derivedTitle = title !== false ? title || t("pageTitle") : null;

  const derivedDescription =
    description !== false ? description || t("pageDescription") : undefined;

  const derivedKeywordsSuffix =
    keywordsSuffix !== false && keywords !== false
      ? keywordsSuffix || t("common:pageKeywordsSuffix")
      : "";
  const derivedKeywords =
    keywords !== false ? keywords || t("pageKeywords") : null;

  return (
    <Head>
      <title>
        {derivedTitle}
        {derivedTitleSuffix}
      </title>
      <meta name="description" content={derivedDescription} />
      <meta
        name="keywords"
        content={`${derivedKeywords}${derivedKeywordsSuffix}`}
      />
      {derivedCanonicalUrl ? (
        <link rel="canonical" href={derivedCanonicalUrl} />
      ) : null}
    </Head>
  );
};

export default PageMeta;

On most pages you just use <PageMeta t={t} /> and the component will pick the right metadata as long as you page uses withNamespaces("pageName"). On the home page you might want to use <PageMeta t={t} titleSuffix={false} /> if you want to see My awesome website instead of Homepage – my awesome website. On a product / blog post page this would be something like <PageMeta t={t} title={product.title} description={product.description} />.

isaachinman · 2019-04-01T12:12:12Z

That must mean that NextJs is putting the Head component somewhere outside our i18n provider.

isaachinman · 2019-04-03T09:55:45Z

@Nelrohd I have a professional project wherein we're localising next/head inside our _app.tsx as such:

Head.tsx

import NextHead from 'next/head';
import * as React from 'react';

import { withNamespaces } from '../../i18n';

const Head = ({ t }) => (
  <NextHead>
    <title>{t('page.title')}</title>
  </NextHead>
);

export default withNamespaces('common')(Head);

_app.tsx

import * as React from 'react';

import NextApp, { Container } from 'next/app';
import { Head } from '../components';

import { appWithTranslation } from '../i18n';

class App extends NextApp {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <Container>
        <Head />
        <Component {...pageProps} />
      </Container>
    );
  }
}

export default appWithTranslation(App);

Not sure exactly what is going wrong for you, but I can confirm that this approach works just fine.

Nelrohd · 2019-04-03T10:44:48Z

@isaachinman Your example is different from mine.

In my example, my component use withNamespaces and is placed inside next/head.

In your example you create a component with withNamespaces and put its content inside next/head

isaachinman · 2019-04-03T10:48:21Z

Yes I understand that. Clearly NextJs is lifting next/head into the head and out of the React tree. The approach I showed works - is it possible for you to refactor to this?

Nelrohd · 2019-04-03T11:08:24Z

@isaachinman For sure, I already did it before in fact but I wanted to point the issue to help others and maybe have a fix if it's possible.

isaachinman · 2019-04-03T11:36:15Z

I don't think there's going to be a possible fix outside of wrapping as I showed above. It's an acceptable solution and works just fine, though. Happy to continue discussion if anyone feels it's necessary.

StarpTech · 2019-04-29T20:05:36Z

I also faced with that issue. This issue should be pinned in the readme 😄

StarpTech · 2019-04-29T20:13:52Z

Another solution is to wrap your tags in your component with a next/head component instead to centralize them in a single next/head at the end next will hoist them all together.

import React, { Component } from "react";
import Head from 'next/head';

export const MetaOgTag = withNamespaces("common")(
  class extends Component {
    render() {
      const { title } = this.props;

      return (
        <Head>
          <meta property="og:title" content={t(title)} />
        </Head>
      )
    }
  }
);

import React from "react";
import { MetaOgTag } from "../components/MetaOgTag";
import Head from "next/head";

export default class Index extends React.Component {

  render() {
    return (
      <Head>
        <title>Hello World</title>
      </Head>
      <MetaOgTag title={"Hello World"} />
    );
  }
}

isaachinman · 2019-04-30T08:40:49Z

@StarpTech #286.

isaachinman closed this as completed Apr 3, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Component using withNamespaces inside next/head crashes the app #251

Component using withNamespaces inside next/head crashes the app #251

Nelrohd commented Apr 1, 2019

isaachinman commented Apr 1, 2019

kachkaev commented Apr 1, 2019 •

edited

isaachinman commented Apr 1, 2019

isaachinman commented Apr 3, 2019

Nelrohd commented Apr 3, 2019

isaachinman commented Apr 3, 2019

Nelrohd commented Apr 3, 2019

isaachinman commented Apr 3, 2019

StarpTech commented Apr 29, 2019

StarpTech commented Apr 29, 2019 •

edited

isaachinman commented Apr 30, 2019

Component using withNamespaces inside next/head crashes the app #251

Component using withNamespaces inside next/head crashes the app #251

Comments

Nelrohd commented Apr 1, 2019

Describe the bug

Occurs in next-i18next version

Steps to reproduce

Expected behaviour

Screenshots

OS (please complete the following information)

Additional context

isaachinman commented Apr 1, 2019

kachkaev commented Apr 1, 2019 • edited

isaachinman commented Apr 1, 2019

isaachinman commented Apr 3, 2019

Nelrohd commented Apr 3, 2019

isaachinman commented Apr 3, 2019

Nelrohd commented Apr 3, 2019

isaachinman commented Apr 3, 2019

StarpTech commented Apr 29, 2019

StarpTech commented Apr 29, 2019 • edited

isaachinman commented Apr 30, 2019

kachkaev commented Apr 1, 2019 •

edited

StarpTech commented Apr 29, 2019 •

edited