redux-form: Error: formValues() must be used inside a React tree decorated with reduxForm()
Bug report
Demo: https://stackblitz.com/edit/redux-form8?file=Form.js But demo doesn’t work because of https://github.com/erikras/redux-form/issues/4293
Steps to reproduce
$ npx create-react-app form
$ cd form
$ yarn add redux redux-form react-redux
# Copy code from demo index.js and Form.js
$ yarn start
So, about bug:
import { reduxForm, formValues } from 'redux-form';
/* ... */
export default reduxForm({ form: 'Form' })(formValues('name')(Form));
After update to version 8.0.1 using formValues decorator results in an error:
Uncaught Error: formValues() must be used inside a React tree decorated with reduxForm()
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 17
- Comments: 24 (17 by maintainers)
Commits related to this issue
- Issue #4299 Hoc component does not rewrite context value (_reduxForm) with props add test to check not rewritable context — committed to Viktor-the-great/redux-form by deleted user 5 years ago
- createReduxForm: Don't put WrappedComponent in a withReduxForm withReduxForm is for internal redux-form components that need to interact directly with the guts of the form state, not for access by us... — committed to asazernik/redux-form by asazernik 5 years ago
- createReduxForm: Don't put WrappedComponent in a withReduxForm withReduxForm is for internal redux-form components that need to interact directly with the guts of the form state, not for access by us... — committed to asazernik/redux-form by asazernik 5 years ago
- Hoc component does not rewrite context value (_reduxForm) with props (#4299) * lock file's lint-staged satisfy 8.1.5 * upgrading husky syntax — committed to Viktor-the-great/redux-form by deleted user 5 years ago
- Issue #4299 Hoc component does not rewrite context value (_reduxForm) with props add test to check not rewritable context — committed to redux-form/redux-form by deleted user 5 years ago
Any news on this issue?
@erikras will this be fixed any time soon?
Any ETA for this issue?
It looks like the component tree is inverted?
Hoc (created via withReduxForm) -> Context.Consumer -> ReduxForm -> Connect -> Form -> Context.Provider
The consumer is higher up the tree than the provider, and thus only ever receives the initial value (null, which causes the check to fail).
You can probably just refactor the rendering here? https://github.com/erikras/redux-form/blob/5cdfa2b8227edddc00ae079f767aa17b64d46526/src/createReduxForm.js#L1151
Hi guys. Any updates from a redux-form team?
Here is a version of that using recompose’s toRenderProps and fromRenderProps that allows the same usage as before.
This is very strange. I wonder if it’s a bug in React?
Confirmed. Will investigate tomorrow.
The issue still exists in 8.0.4, working (broken) example: https://codesandbox.io/s/21m68rvozn
Published in
v8.2.5.