Custom widget with HOC fails with < Error: Unsupported widget definition: object >

[snirp]

Prerequisites

• [ x ] I have read the documentation;
• [ x ] In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.
• Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue.

Description

I have a custom widget that is wrapped in the react-redux "connect" HOC. Until recently it worked, but now fails with "Error: Unsupported widget definition: object". I have tried reverting to old versions of rjsf, but to no avail.

Steps to Reproduce

1. Create a custom widget
2. Wrap in connect({})(CustomWidget) to observe the error

Version

Tried various versions:

• 2.0.0.alpha.1
• 1.8.1
• 1.4.0
• 1.2.0

[epicfaace]

"Until recently it worked" -- do you know what exactly caused this to no longer work? Could it have been a non-rjsf dependency change?

[snirp]

I am currently trying to track that down. Weirdly it seems like nothing in my package.json changed between these builds, so maybe it has to with the either the schema or the data being fed to the rjsf form.

I am just confused atm, but I will give an update here when I track it down.

[snirp]

I can resolve the issue by applying this fix: #1309 (comment)

Basically wrapping the Redux connected component in a plain component, so that the error goes away.

This was not needed before and it seems to occur with latest version of the core React lib. Should we merge this issue with the other one (although it seems to be more specific to React.Memo)

[snirp]

Perhaps a bit clearer:

import React from 'react'
import { connect } from 'react-redux'

const CustomWidget = ({ value, onChange, reduxProp, disabled }) => (
  // whatever
)

const mapStateToProps = (state, ownProps) => ({
  // reduxProp: ...
})

const ConnectedWidget = connect(mapStateToProps)(CustomWidget)

// Needs a wrapper due to this issue
// https://github.com/rjsf-team/react-jsonschema-form/issues/1736
const WrappedConnectedWidget = props => <ConnectedWidget {...props}/>

export default WrappedConnectedWidget

[nuclearspike]

The same thing happened to me. The recent change was that you upgraded your react-redux package and they are using new react features that rjsf does not support yet. My temporary hack to make it work without reverting back to a lower version of react-redux was to wrap the connect call.

So, I wrote this:

const safeWrap = (Comp) => (props) => <Comp {...props} />

Then you just do this:

const ConnectedWidget = safeWrap(connect(mapStateToProps)(CustomWidget))

That works as a temp fix.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please leave a comment if this is still an issue for you. Thank you.