Failed prop type: Invalid prop `activeComponent` of type `object` supplied to `Feature`, expected `function`

[karolisgrinkevicius]

├─ @paralleldrive/react-feature-toggles@2.0.2
├─ react@16.6.3
└─ styled-components@4.1.1

When using configureFeature I'm getting annoying warning Warning: Failed prop type: Invalid prop activeComponent of type object supplied to Feature, expected function. in case of feature is not enabled.

Source code that I'm using Feature flags in:

const StyledDiv= styled.div`
  padding-left: 10px;
`;

const ComponentOrNull = configureFeature(() => null)('demo')(StyledDiv);

export const Copyright = () => (
  <FeatureToggles features={[]}>
     <ComponentOrNull />
  </FeatureToggles>
);

[ericelliott]

This code works for me:

const StyledDiv = () => <div>Works!</div>;
const ComponentOrNull = configureFeature(() => null)('demo')(StyledDiv);

export const Copyright = () => (
  <FeatureToggles features={[]}>
    <ComponentOrNull />
  </FeatureToggles>
);

The only difference is the definition of StyledDiv. Looks like the problem is that styled.div is not returning a component?

[karolisgrinkevicius]

@ericelliott thanks for your reply!

First of all the problem must be somewhere between styled-components and feature toggles. StyledDiv returns a component as we definitely expect. Please try out styled-components and then if you don't get this warning I will create a reproducible repo. Thanks a lot!

[kennylavender]

Hello @karolisgrinkevicius,

I tried adjusting the Feature components propTypes to see if adding a node or element type might remove the warning, but neither of those removed the warning. Interestingly PropTypes.object does get rid of the warning but we don't want to accept just any object so I think its best we avoid making that change.

I dug a bit deeper and it seems that styled-components returns a forwardRef object, but the prop-types package doesnt have a type that works for forwardRefs at the moment, here is the related issue: facebook/prop-types#200

Looks like React mentions that forwardRefs are a breaking change of types: https://reactjs.org/docs/forwarding-refs.html#note-for-component-library-maintainers

[karolisgrinkevicius]

Hi @kennylavender. Thanks for your response. So we just have to wait while prop-types problems are being fixed?

[kennylavender]

Your welcome. Yup, if/when they push a solution we can look into it again. Closing for now.