Pages Editor: Warning: forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?

[eatyourgreens]

Expected behavior

The app should really run in development mode without this warning (but it's only a problem in development, not production.)

Current behavior

Please include any error messages from the browser console and/or screenshots

The pages editor uses propTypes on forwardRef in a couple of places, but prop types are only allowed on React components. forwardRef(function (props, ref)) doesn't take a component as an argument, so the following prop types are ignored by React.

Panoptes-Front-End/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/EditStepDialog.jsx

Lines 117 to 129 in b8cf174

	EditStepDialog.propTypes = {
	allTasks: PropTypes.object,
	deleteTask: PropTypes.func,
	enforceLimitedBranchingRule: PropTypes.shape({
	stepHasBranch: PropTypes.bool,
	stepHasOneTask: PropTypes.bool,
	stepHasManyTasks: PropTypes.bool
	}),
	onClose: PropTypes.func,
	step: PropTypes.object,
	stepIndex: PropTypes.number,
	updateTask: PropTypes.func
	};

Panoptes-Front-End/app/pages/lab-pages-editor/components/TasksPage/components/NewTaskDialog.jsx

Lines 125 to 134 in b8cf174

	NewTaskDialog.propTypes = {
	addTask: PropTypes.func,
	enforceLimitedBranchingRule: PropTypes.shape({
	stepHasBranch: PropTypes.bool,
	stepHasOneTask: PropTypes.bool,
	stepHasManyTasks: PropTypes.bool
	}),
	openEditStepDialog: PropTypes.func,
	stepIndex: PropTypes.number
	};

forwardRef(function (props, ref)) returns a React component, so what you want to do is something like:

function MyComponentWithRef(props, ref) {
  return <SomeComponent ref={ref} {...props} />;
}

const MyComponent = forwardRef(MyComponentWithRef);
MyComponent.propTypes = {
/*
  Define your prop types here.
*/
}

export default MyComponent;

Steps to replicate

Load up the app in development mode and these warnings will show up near the top of the console.

Additional information

Noticed while I was chasing down some React development errors that broke #7114.

This will hopefully get easier in React 19, which gets rid of forwardRef.

[eatyourgreens]

Pinging @shaunanoordin.

[eatyourgreens]

I've included the fix for this in #7114 but I've put it in its own commit, so that you can git cherry-pick it out if you want to isolate the fix.