Skip to content

Instantly share code, notes, and snippets.

@jamesreggio
Last active August 24, 2018 18:35
Show Gist options
  • Save jamesreggio/caea042d7a9cd87065a187d5f1f97c62 to your computer and use it in GitHub Desktop.
Save jamesreggio/caea042d7a9cd87065a187d5f1f97c62 to your computer and use it in GitHub Desktop.
Self-applying patch to work around react-redux#914 (invariant failures when using `connect` upon a component wrapped in `React.forwardRef`)
#!/bin/sh
###############################################################################
# USAGE
###############################################################################
# 1. Install the `react-is` package in your project with
# `npm i --save react-is` or `yarn add react-is`.
#
# 2. Place this script in the root of your repository, alongside `package.json`.
#
# 3. Run this script after running `npm install` or `yarn`.
###############################################################################
# This script will apply a patch to `react-redux` in order to workaround invariant
# failures when using `connect` with a component wrapped via `React.forwardRef`.
#
# This patch is fairly dumb: all it does is change the invariant to use the new
# `isValidElementType` method in `react-is`, which has support for `forwardRef`.
#
# react-redux#1000, when merged, will eliminate the need for this patch.
###############################################################################
patch -p0 -N << END_OF_PATCH
*** node_modules/react-redux/lib/components/connectAdvanced.js 2018-08-22 20:22:42.000000000 -0400
--- connectAdvanced.js 2018-08-24 14:20:06.000000000 -0400
***************
*** 16,21 ****
--- 16,23 ----
var _react = require('react');
+ var _reactIs = require('react-is');
+
var _Subscription = require('../utils/Subscription');
var _Subscription2 = _interopRequireDefault(_Subscription);
***************
*** 98,104 ****
var childContextTypes = (_childContextTypes = {}, _childContextTypes[subscriptionKey] = _PropTypes.subscriptionShape, _childContextTypes);
return function wrapWithConnect(WrappedComponent) {
! (0, _invariant2.default)(typeof WrappedComponent == 'function', 'You must pass a component to the function returned by ' + (methodName + '. Instead received ' + JSON.stringify(WrappedComponent)));
var wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
--- 100,106 ----
var childContextTypes = (_childContextTypes = {}, _childContextTypes[subscriptionKey] = _PropTypes.subscriptionShape, _childContextTypes);
return function wrapWithConnect(WrappedComponent) {
! (0, _invariant2.default)(_reactIs.isValidElementType(WrappedComponent), 'You must pass a component to the function returned by ' + (methodName + '. Instead received ' + JSON.stringify(WrappedComponent)));
var wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
***************
*** 303,306 ****
return (0, _hoistNonReactStatics2.default)(Connect, WrappedComponent);
};
! }
\ No newline at end of file
--- 305,308 ----
return (0, _hoistNonReactStatics2.default)(Connect, WrappedComponent);
};
! }
END_OF_PATCH
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment