Next-i18next: Typescript translated component

[floflock]

Describe the bug

In #220 was a discussion about typescript and appWithTranslation method coming from the package. I have a similar image on method withTranslation, see screenshot below:

Occurs in next-i18next version

"next-i18next": "^0.44.0"

Steps to reproduce

This is my page component which throws the typescript issue

import TopMenuBar from '../components/navigation/topMenuBar2'
import React, { Component } from 'react'
import scss from '../styles/index.scss'
import { withTranslation } from '../lib/i18n'

class IndexPage extends Component {

  static async getInitialProps() {
    return {
      namespacesRequired: ['common'],
    }
  }

  render() {
    return (
      <React.Fragment>
        <TopMenuBar title={'Index Page'} />
        <div className={[scss.hero, scss.hero2].join(' ')}>
          <h1 className={scss.title}>Welcome to create-next-app-cli (Create Next.js App building tools)</h1>
          <p className={scss.description}>To get started, edit <code>pages/index.js</code> and save to reload.
          </p>
          <div className={scss.row}>
            <a href="https://nextjs.org/docs/" className={scss.card}>
              <h3>Getting Stasdsdrted &rarr;</h3>
              <p>Learn more about Next.js on official website</p>
            </a>
            <a href="https://github.com/themodernjavascript/create-next-app-cli" className={scss.card}>
              <h3>Create Next App CLI &rarr;</h3>
              <p>Was this tools helpful?</p>
            </a>
          </div>
        </div>
      </React.Fragment>
    )
  }

}

export default withTranslation('common')(IndexPage)

Expected behaviour

Class component should be vaild for the export with withTranslation

Anyone Ideas?

[ReinoutStevens]

import { WithTranslation } from 'react-i18next';
class IndexPage extends Component<WithTranslation> {
}

You need to tell your component expects the props that withTranslation injects, if not there is no way your component knows that those props are available.

[floflock]

@ReinoutStevens thanks, I extend the props with WithTranslation, see below:

interface PageProps extends WithTranslation {}
class LoginPage extends Component<PageProps> {}

In the meanwhile, I wrote a PR to re-export WithTranslation to have a single point of import. See here: https://github.com/isaachinman/next-i18next/pull/361

With this PR, which is in Version 0.45, importing WithTranslation gets more comfortable.

[isaachinman]

@floflock Can this issue be closed, then? Or do we need to address something else?

[EricVanDerDijs]

Hi, I have just started using your latest versión and this issue seems to have been reopened, it seems that the "WithTranslation" interface has been overwritten with the value of the "withTranslation" type and exported like that. Currently it is imposible to use the HOC with class components using typescript.

The workaround I found was to Import the "WithTranslation" interface directly from the "react-i18next" directly.

[Averethel]

@isaachinman This has been broken since v0.50. Any chance for a fix?

[isaachinman]

@Averethel Apologies if that's the case. I've just released v1.0.0 as it happens. Would be very grateful for a fix, and also test coverage to prevent regressions.

[Averethel]

@isaachinman I'll try to prepare a fix early next week

[isaachinman]

Thanks. Important to say that we probably shouldn't merge bug fixes without accompanying test coverage.

[Averethel]

Will keep that in mind. I should be able to provide a failing test.
In the meantime could you reopen the issue?