0

We use a React component package which provides some reusable components such as Button, Form, TreeView etc... That package is developed on top of React 14.

We want to develop a new application using React 16 and utilize this component package because it provides a lot of look and feel stuff out of the box.

Our code looks like this.

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Button from 'reusable-components/button';

export default class MyComponent extends Component {
    render() {
        return <Button>{this.props.buttonCaption}</Button>;
    }
}

MyComponent.propTypes = {
    buttonCaption: PropTypes.string
};

With this code, when I open the page, I get an error saying TypeError: o.PropTypes is undefined in the browser console. I believe "o.PropTypes" is the obfuscated version of "React.PropTypes" and I am getting this error because somewhere in the source code of Button component they used "React.PropTypes" which became invalid after React 14.

Another thing is that when I do not use Button and do not import it at all, everything works fine. So, I am pretty sure that the issue is caused by the Button component.

I tried below thing in my index.js but it did not help.

import React from 'react';
import PropTypes from 'prop-types';

React.PropTypes = PropTypes;

Is there a way to use React 14 components from React 16 app? In the worst case we will downgrade to 14 as the library does not have 16 support yet but we really want to avoid it.

Mehmet Ataş
  • 11,081
  • 6
  • 51
  • 78
  • Have they not added support for React 16 in that library? Are you using webpack or browserify? – Chris Jan 17 '18 at 13:31
  • They do not have React16 support yet and yes, we are using webpack. – Mehmet Ataş Jan 17 '18 at 13:32
  • I haven't used this myself, but I am pretty sure you can setup a module alias in webpack. google it for more info. Otherwise there probably isn't much you can do... Perhaps consider replacing that library with a new one? If they haven't added support for R16 yet then they probably never will and that will only give you more headaches in the future. Choose something that is popular and well-maintained. – Chris Jan 17 '18 at 13:38
  • try to update Button component to last version or modify it – egorchik Jan 17 '18 at 13:53
  • Have you tried reading through this? https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes Perhaps removing the prop types until you migrate the library could be helpful to at least use the library. Otherwise you could use something like `NormalModuleReplacementPlugin` to swap implementation in build time (still leaving you with no prop type anyway). – user3056783 Feb 03 '21 at 21:33

0 Answers0