I'm trying to write a React component using Typescript, withStyles from @material-ui/core and withTranslation from react-i18next. Both of this wrappers are HOC.
Typescript complains that there is an error about types.
For some reason this line does not work :
export default withTranslation()(withStyles(styles)(HomePage)); // error
However, if I use only withStyles or only withTranslation it works perfectly :
export default withTranslation()(HomePage); // ok
export default withStyles(styles)(HomePage); // ok
I know there is a problem about types, interfaces or maybe something wrong about exporting my components this way.
I got the same problem when I used withRouter along with withStyles. I solved the error by changing their order in the export line ! (Didn't get why it was solved TBH)
I saw some solutions that suggest to wrap the whole component under withStyles but it seems ugly to me. Is there any suggestion ?
This is the error :
(alias) withStyles<"root", {}, {}>(style: Styles<Theme, {}, "root">, options?: {} | undefined): PropInjector<{
classes: Record<"root", string>;
}, StyledComponentProps<"root">>
import withStyles
Argument of type 'ComponentType<Pick<IProps, "i18n" | "t"> & StyledComponentProps<"root">>' is not assignable to parameter of type 'ComponentType<WithTranslation>'.
Type 'ComponentClass<Pick<IProps, "i18n" | "t"> & StyledComponentProps<"root">, any>' is not assignable to type 'ComponentType<WithTranslation>'.
Type 'ComponentClass<Pick<IProps, "i18n" | "t"> & StyledComponentProps<"root">, any>' is not assignable to type 'ComponentClass<WithTranslation, any>'.
Types of property 'propTypes' are incompatible.
Type 'WeakValidationMap<Pick<IProps, "i18n" | "t"> & StyledComponentProps<"root">> | undefined' is not assignable to type 'WeakValidationMap<WithTranslation> | undefined'.
Type 'WeakValidationMap<Pick<IProps, "i18n" | "t"> & StyledComponentProps<"root">>' is not assignable to type 'WeakValidationMap<WithTranslation>'.
Types of property 'i18n' are incompatible.
Type 'Validator<{ changeLanguage: Function; }> | undefined' is not assignable to type 'Validator<i18n> | undefined'.
Type 'Validator<{ changeLanguage: Function; }>' is not assignable to type 'Validator<i18n>'.
Type '{ changeLanguage: Function; }' is missing the following properties from type 'i18n': t, init, loadResources, use, and 28 more.ts(2345)
index.d.ts(80, 3): 'tReady' is declared here.
This is my component :
import React, { PureComponent } from "react";
// i18n
import { withTranslation } from "react-i18next";
import { InterfaceI18n } from "../../i18n";
// Stylus
import { WithStyles } from "@material-ui/core";
import withStyles from "@material-ui/core/styles/withStyles";
import styles from "./HomePage.style";
type WrapperPropsStylus = WithStyles<typeof styles>;
interface IProps extends InterfaceI18n, WrapperPropsStylus {}
class HomePage extends PureComponent<IProps> {
changeLanguage = (lng: string) => {
const { i18n } = this.props;
i18n.changeLanguage(lng);
};
public render() {
const { classes, t } = this.props;
return (
<div className={classes.root}>
<div>
This is the home page (Public page) <br />
</div>
{t("Welcome to React")} <br />
<button onClick={() => this.changeLanguage("de")}>de</button>
<button onClick={() => this.changeLanguage("en")}>en</button>
</div>
);
}
}
export default withTranslation()(withStyles(styles)(HomePage));
