Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Failed prop type: The prop i18n is marked as required ... but its value is undefined #291

Closed
kernle32dll opened this issue Aug 26, 2018 · 3 comments

Comments

@kernle32dll
Copy link

kernle32dll commented Aug 26, 2018

Describe the bug
While updating to 2.5.0 (2.4.2 works fine), I encountered some warnings on the console while using withI18n. In essence, it seems that the i18n property is not defined while creating the initial component. The output is as follows:

 Warning: Failed prop type: The prop `i18n` is marked as required in `HeadTitle`, but its value is `undefined`.
    in HeadTitle (created by WithI18n)
    in WithI18n (created by PageContent)
    ...
    in I18nProvider (created by App)
    ...

Funnily enough, when I make HeadTitle a class, and inspect the properties in the constructor, everything is there. So no idea when the prop types are checked, or put differently - why or when the warnings are given in the first place.

To Reproduce

The following code suffices. Note that this is a slimmed down version of the actual component. I am aware of the new <I18n> component of 2.5.0.

import React from 'react';
import PropTypes from 'prop-types';
import {withI18n} from "@lingui/react";

const HeadTitle = (props) => {
  return (
    <div>appName - {props.i18n._(props.title)}</div>
  )
};

export default withI18n()(HeadTitle)

HeadTitle.propTypes = {
  i18n: PropTypes.object.isRequired,
  title: PropTypes.string.isRequired,
};

Note, if withI18n receives something "wrapped" (for lack of a better term), no warnings are given. For example, the following code works fine (that is, no warnings).

export default withI18n()(withCookies(HeadTitle))

(withCookies is used for an example, but anything will do, e.g. redux).

Expected behavior
No warnings are logged ;-)

Additional context

I suspect the change to withI18n.js in this commit is the culprit. But this is just a hunch.

@tricoder42
Copy link
Contributor

Hey @kernle32dll,
this is indeed a bug introduced by I18n render prop component.

I tried to figure out quickly what's the issue but no luck. I'll take a look again later.

@tricoder42
Copy link
Contributor

This was fixed in #302 and will be released soon.

@tricoder42
Copy link
Contributor

Released in v2.6.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants